/* ── 서브페이지 전용 ────────────────────────────────
   메인은 영상이 주인공이지만 서브는 '읽는 화면'이다.
   헤더는 조용한 밴드로 두고 본문은 규격표·절차 중심으로 간다. */

body.sub .nav { position: sticky; background: rgba(1,1,2,0.78); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
body.sub .nav-links a.is-active { color: var(--text); }

/* 페이지 헤더 — 상단 이미지 + 로고 궤도 */
.page-head {
  position: relative;
  padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(56px, 8vh, 92px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.page-head .ph-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.42;
  transform: scale(1.06);
  animation: phZoom 22s ease-in-out infinite alternate;
}
@keyframes phZoom { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(80% 70% at 6% 88%, rgba(1,1,2,0.94) 0%, rgba(1,1,2,0.60) 46%, transparent 76%),
    linear-gradient(180deg, rgba(1,1,2,0.72) 0%, rgba(1,1,2,0.30) 46%, rgba(1,1,2,0.92) 100%);
}
.page-head > *:not(.ph-bg):not(.curve-mark):not(.orbit-mark) { position: relative; z-index: 3; }
.page-head h1 {
  font-size: clamp(34px, 5vw, 68px); font-weight: 800;
  letter-spacing: -0.038em; line-height: 1.12; margin: 20px 0 22px; max-width: 18ch;
  text-shadow: 0 2px 30px rgba(1,1,2,0.7);
}
.page-head p { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.85; color: #C3C9D2; max-width: 52ch; }

/* 진입 모션 */
.page-head h1, .page-head p, .page-head .label {
  opacity: 0; transform: translateY(16px);
  animation: phIn 720ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.page-head .label { animation-delay: 60ms; }
.page-head h1 { animation-delay: 160ms; }
.page-head p  { animation-delay: 300ms; }
@keyframes phIn { to { opacity: 1; transform: none; } }

/* 규격표 */
.svc-spec.wide { grid-template-columns: 1fr; }
.svc-spec.wide > div { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: baseline; padding: 26px 30px; transition: background 220ms ease; }
.svc-spec.wide > div:hover { background: var(--surface-2); }
.svc-spec.wide dt { margin-bottom: 0; }

.need-data {
  font-size: 15.5px; line-height: 1.85; color: #9AA1AC;
  border-left: 2px solid var(--heat); padding: 4px 0 4px 16px;
}

body.sub main section:first-child { padding-top: clamp(56px, 8vh, 92px); }
body.sub .flow { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
body.sub .compare { grid-template-columns: 1fr 1.5fr; border: 1px solid var(--line); }

@media (max-width: 900px) {
  .svc-spec.wide > div { grid-template-columns: 1fr; gap: 8px; }
  body.sub .compare { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .page-head .ph-bg, .page-head::before { animation: none; }
  .page-head h1, .page-head p, .page-head .label { opacity: 1; transform: none; animation: none; }
}

/* ── 형제 페이지 탭바 (SDMI 대비 개선) ───────────────
   SDMI는 히어로 위에 알약 버튼을 얹었다. 우리는 히어로 바로 아래
   sticky 바로 내려 스크롤 중에도 형제 페이지로 바로 이동할 수 있게 한다. */
.sibbar {
  position: sticky; top: 78px; z-index: 40;
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
  padding: 0 var(--gutter);
  background: rgba(1,1,2,0.86); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.crumb { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.crumb i { font-style: normal; color: var(--line); }
.crumb span { color: var(--text); }

.sibs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sibs::-webkit-scrollbar { display: none; }
.sib {
  position: relative; white-space: nowrap;
  padding: 22px 18px; font-size: 15.5px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: color 200ms ease;
}
.sib:hover { color: var(--text); }
.sib.is-on { color: var(--text); font-weight: 600; }
.sib.is-on::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px;
  background: var(--heat);
  animation: sibIn 420ms cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes sibIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .sibbar { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 12px; top: 68px; }
  .sib { padding: 16px 14px 16px 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sib.is-on::after { animation: none; } }

/* ── 특허·인증 ── */
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cert-grid > div { background: var(--surface); padding: 30px 32px; transition: background 220ms ease; }
.cert-grid > div:hover { background: var(--surface-2); }
.cert-grid .org { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--heat-hi); margin-bottom: 12px; }
.cert-grid b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; }

/* ── 수행 실적 ── */
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.perf-grid > div { background: var(--surface); padding: 28px 26px 32px; transition: background 220ms ease, transform 320ms ease; }
.perf-grid > div:hover { background: var(--surface-2); transform: translateY(-3px); }
.perf-grid .yr { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--heat-hi); }
.perf-grid b { display: block; font-size: 18px; font-weight: 700; margin: 12px 0 20px; letter-spacing: -0.02em; }
.perf-grid dl { display: grid; gap: 12px; }
.perf-grid dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.perf-grid dd { font-size: 15.5px; color: #C3C9D2; font-variant-numeric: tabular-nums; }
.perf .need-data { margin-top: 22px; font-size: 13.5px; }

/* ── 페이지 제목 애니메이션 (SDMI 대비 개선) ─────────
   SDMI는 영문 카테고리 + 라인 + 국문 태그라인이 정적이다.
   우리는 라인이 좌→우로 그어지고 제목이 마스크에서 밀려 올라온다. */
.page-head h1 { overflow: hidden; }
.page-head h1 > span { display: inline-block; animation: h1Up 820ms cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes h1Up { from { transform: translateY(105%); } to { transform: none; } }
.page-head .label::before { animation: lineDraw 700ms cubic-bezier(0.22,0.61,0.36,1) 120ms both; transform-origin: left; }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .page-head h1 > span, .page-head .label::before { animation: none; }
}

/* ── 이미지 밴드 ────────────────────────────────
   글만 이어지면 읽는 힘이 떨어진다. 섹션 사이에 이미지를 끼워 호흡을 만든다.
   스크롤로 들어올 때 이미지가 마스크에서 열리며 아주 천천히 줌아웃한다. */
.band { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding: 0; border-top: 1px solid var(--line); }
.band-media { position: relative; overflow: hidden; min-height: clamp(320px, 46vh, 520px); }
.band-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.14); filter: brightness(0.72) saturate(1.05);
  transition: transform 1400ms cubic-bezier(0.22,0.61,0.36,1), clip-path 1000ms cubic-bezier(0.22,0.61,0.36,1);
  clip-path: inset(0 0 100% 0);
}
.band[data-in="1"] .band-media img { transform: scale(1); clip-path: inset(0 0 0 0); }
.band-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 78px) var(--gutter); background: var(--surface); }
.band-copy h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -0.034em; line-height: 1.24; margin: 18px 0 20px; }
.band-copy p { font-size: 17px; line-height: 1.9; color: #B4BAC4; }

/* ── 실적 합계 스트립 ── */
.perf-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: none; }
.perf-sum.cols-2 { grid-template-columns: repeat(2, 1fr); }  /* 타일 2개짜리 인스턴스 */
.perf-sum > div { background: var(--ink); padding: 30px 28px 34px; }
.perf-sum span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 16px; }
.perf-sum b { font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); font-weight: 500; color: var(--heat-hi); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; }
  .perf-sum { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .band-media img { transform: none; clip-path: none; transition: none; }
}

/* ── 우측 마크: 궤도(공통 뼈대) + 페이지별 변주 ──────────
   에어로원 궤도가 모든 서브페이지의 공통 언어다.
   그 안에 페이지가 다루는 것을 얹는다 —
   서비스·기술: 해당 물리량 곡선 / 인증: 계측 눈금 / 회사·소식: 궤도만.
   장식이 아니라 '이 페이지가 무엇을 다루는가'를 브랜드 형태 안에서 말한다. */
.orbit-mark {
  position: absolute; right: clamp(24px, 5vw, 80px); top: 58%; transform: translateY(-50%);
  width: min(520px, 38%); aspect-ratio: 644 / 370; z-index: 2;
  pointer-events: none; overflow: visible;
}
.orbit-mark .ring-a, .orbit-mark .ring-b {
  fill: none; stroke: var(--heat-hi); stroke-width: 2; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px rgba(94,110,255,0.55));
}
.orbit-mark .ring-a { opacity: 0.85; stroke-dasharray: 1236; stroke-dashoffset: 1236; animation: drawA 2000ms cubic-bezier(0.22,0.61,0.36,1) 300ms forwards; }
.orbit-mark .ring-b { opacity: 0.55; stroke-dasharray: 1135; stroke-dashoffset: 1135; animation: drawB 2000ms cubic-bezier(0.22,0.61,0.36,1) 760ms forwards; }
@keyframes drawA { to { stroke-dashoffset: 0; } }
@keyframes drawB { to { stroke-dashoffset: 0; } }
.orbit-mark .glow-a, .orbit-mark .glow-b {
  fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: 0;
  filter: drop-shadow(0 0 9px rgba(130,143,255,1));
}
.orbit-mark .glow-a { stroke-dasharray: 90 1146; stroke-dashoffset: 1236; animation: glowIn 400ms ease 2300ms forwards, runA 7s linear 2300ms infinite; }
.orbit-mark .glow-b { stroke-dasharray: 70 1065; stroke-dashoffset: 0; animation: glowIn 400ms ease 2900ms forwards, runB 9.5s linear 2900ms infinite; }
@keyframes glowIn { to { opacity: 1; } }
@keyframes runA { from { stroke-dashoffset: 1236; } to { stroke-dashoffset: 0; } }
@keyframes runB { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1135; } }
.orbit-mark .orb-node { fill: var(--heat-hi); opacity: 0; animation: nodeIn 600ms ease 2200ms forwards; }
@keyframes nodeIn { to { opacity: 0.9; } }

@media (max-width: 900px) { .orbit-mark { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .orbit-mark .ring-a, .orbit-mark .ring-b { stroke-dashoffset: 0; animation: none; }
  .orbit-mark .glow-a, .orbit-mark .glow-b { display: none; }
}

/* ── 페이지 제목 (SDMI 구조) ────────────────────────
   영문 카테고리를 주(主)로 크게, 가로 라인 뒤에 국문 한 줄을 보조로. */
.ph-title {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  margin: 0; max-width: none;
  text-shadow: 0 2px 30px rgba(1,1,2,0.7);
}
.ph-title .en {
  font-size: clamp(40px, 6.4vw, 96px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; white-space: nowrap;
  animation: h1Up 820ms cubic-bezier(0.22,0.61,0.36,1) 120ms both;
}
.ph-title .rule {
  flex: 1 1 auto; min-width: 40px; height: 1px;
  background: rgba(208,214,224,0.5);
  transform: scaleX(0); transform-origin: left;
  animation: ruleDraw 900ms cubic-bezier(0.22,0.61,0.36,1) 620ms forwards;
}
@keyframes ruleDraw { to { transform: scaleX(1); } }
.ph-title .ko {
  position: relative; z-index: 4;
  font-size: clamp(15px, 1.5vw, 21px); font-weight: 600; line-height: 1.5;
  color: #E4E8EE; text-align: right; white-space: nowrap;
  letter-spacing: 0.01em; word-spacing: 0.14em;
  text-rendering: geometricPrecision;
  text-shadow: 0 2px 18px rgba(1,1,2,0.95), 0 0 40px rgba(1,1,2,0.8);
  opacity: 0; animation: phIn 700ms ease 900ms forwards;
}
.page-head h1 { overflow: visible; }

@media (max-width: 900px) {
  .ph-title { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ph-title .en { white-space: normal; }
  .ph-title .rule { width: 60px; flex: 0 0 auto; }
  .ph-title .ko { text-align: left; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-title .en, .ph-title .rule, .ph-title .ko { animation: none; opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   서브페이지 콘텐츠 컴포넌트
   메인과 같은 어휘(아이콘·계측 톤·순차 등장)를 서브에서도 쓴다.
   블록은 전부 [data-reveal]에 얹히고, 자식은 --i 순서로 시차를 둔다.
   ══════════════════════════════════════════════════════════════ */

/* ── 순차 등장 ── 자식에 style 없이 :nth-child로 시차를 준다 */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 640ms cubic-bezier(0.22,0.61,0.36,1), transform 640ms cubic-bezier(0.22,0.61,0.36,1); }
[data-in="1"] .stagger > * { opacity: 1; transform: none; }
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 90ms; }
.stagger > *:nth-child(3) { transition-delay: 180ms; }
.stagger > *:nth-child(4) { transition-delay: 270ms; }
.stagger > *:nth-child(5) { transition-delay: 360ms; }
.stagger > *:nth-child(6) { transition-delay: 450ms; }

/* ── 아이콘 카드 그리드 ── 서브페이지의 주력 블록 */
.icards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.icards.c2 { grid-template-columns: repeat(2, 1fr); }
.icards.c3 { grid-template-columns: repeat(3, 1fr); }
.icards.c4 { grid-template-columns: repeat(4, 1fr); }
.icards > div {
  background: var(--surface); padding: 30px 26px 34px;
  position: relative; overflow: hidden;
  transition: background 300ms ease;
}
.icards > div:hover { background: var(--surface-2); }
/* 호버하면 상단에 계측선이 한 번 그어진다 */
.icards > div::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--heat-hi), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(0.22,0.61,0.36,1);
}
.icards > div:hover::after { transform: scaleX(1); }
.icards .ico { width: 30px; height: 30px; color: var(--heat-hi); margin-bottom: 18px; }
.icards h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.icards p { font-size: 15.5px; line-height: 1.85; color: #A8AFB9; }
.icards .k { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 12px; }

/* ── 수치 스트립 ── 카운트업과 함께 쓴다 */
.figs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.figs.c3 { grid-template-columns: repeat(3, 1fr); }
.figs.c4 { grid-template-columns: repeat(4, 1fr); }
.figs > div { background: var(--surface); padding: 28px 24px 30px; }
.figs span { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; }
.figs b { display: block; font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); font-weight: 500; color: var(--heat-hi); letter-spacing: -0.03em; }
.figs i { display: block; font-style: normal; font-size: 13.5px; color: #A8AFB9; margin-top: 10px; line-height: 1.7; }

/* ── 대비표 ── 기존 방식 vs 에어로원 */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vs > div { background: var(--surface); padding: 30px 28px 34px; }
.vs > div:first-child { opacity: 0.62; }
.vs .k { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 20px; }
.vs > div:last-child .k { color: var(--heat-hi); }
.vs ul { list-style: none; }
.vs li { font-size: 15.5px; line-height: 1.8; color: #A8AFB9; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); position: relative; }
.vs li:last-child { border-bottom: 0; }
.vs li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: var(--muted); }
.vs > div:last-child li { color: var(--text); }
.vs > div:last-child li::before { background: var(--heat-hi); width: 12px; }

/* ── 타임라인 ── 연혁·진행 절차 */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl > div { position: relative; padding: 0 0 30px; }
.tl > div:last-child { padding-bottom: 0; }
.tl > div::before {
  content: ""; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--heat); box-sizing: border-box;
}
.tl > div:first-child::before { background: var(--heat-hi); border-color: var(--heat-hi); box-shadow: 0 0 0 4px rgba(94,110,255,0.18); }
.tl .yr { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--heat); }
.tl h3 { font-size: 17px; font-weight: 700; margin: 8px 0 6px; letter-spacing: -0.02em; }
.tl p { font-size: 15px; line-height: 1.8; color: #A8AFB9; }

/* ── FAQ ── 접히는 문답 */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  transition: color 220ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--heat-hi); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform 280ms ease, border-color 280ms ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--heat-hi); }
.faq .ans { padding: 0 0 24px; font-size: 15.5px; line-height: 1.9; color: #A8AFB9; max-width: 76ch; }

/* ── 인용 ── 한 문장 강조 */
.pull { border-left: 2px solid var(--heat-hi); padding: 6px 0 6px 26px; margin: 0; }
.pull p { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.55; letter-spacing: -0.03em; color: var(--text); }
.pull cite { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); margin-top: 16px; }

@media (max-width: 900px) {
  .icards.c3, .icards.c4, .figs.c3, .figs.c4, .vs { grid-template-columns: 1fr; }
  .icards.c2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; transform: none; transition: none; }
  .icards > div::after { transition: none; }
}

/* ── 태그 칩 ── 히어로 아래 분야 표시 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: #A8AFB9; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; transition: border-color 260ms ease, color 260ms ease;
}
.chips span:hover { border-color: var(--heat-hi); color: var(--heat-hi); }

/* ── 로고월 ── 기관·협약처. CI 원본을 받기 전에는 워드마크로 세운다.
   .logo-wall > div 안에 <img>가 있으면 이미지가, 없으면 텍스트가 보인다. */
.wall-group { margin-bottom: 46px; }
.wall-group:last-child { margin-bottom: 0; }
.wall-group > h3 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--heat); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.wall-group > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-wall > div {
  background: var(--surface); min-height: 118px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 18px; text-align: center;
  transition: background 300ms ease, transform 300ms ease;
}
.logo-wall > div:hover { background: var(--surface-2); transform: translateY(-2px); }
.logo-wall img { max-width: 150px; max-height: 46px; object-fit: contain; filter: grayscale(1) brightness(1.8); opacity: 0.75; transition: filter 300ms ease, opacity 300ms ease; }
.logo-wall > div:hover img { filter: none; opacity: 1; }
.logo-wall b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.5; }
.logo-wall span { font-size: 13px; letter-spacing: -0.01em; color: var(--muted); line-height: 1.65; word-break: keep-all; }

@media (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ══ 갤러리 ══════════════════════════════════════════════════
   사진을 나열하지 않는다. 번호를 매기고, 캡션을 사진 위에 얹고,
   두 장일 때는 높이를 어긋나게 두어 편집 지면처럼 보이게 한다. */
.gal-sec { border-top: 1px solid var(--line); }
.gal { display: grid; gap: 2px; counter-reset: shot; }
.gal.cols-1 { grid-template-columns: 1fr; }
.gal.cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
.gal.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* 두 장이면 오른쪽을 아래로 내려 어긋나게 — 격자 깨기 */
.gal.cols-2 > figure:nth-child(2) { margin-top: clamp(28px, 5vw, 76px); }

.gal figure {
  position: relative; margin: 0; overflow: hidden;
  background: var(--surface); counter-increment: shot;
  border: 1px solid var(--line);
}
.gal img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 10;
  transform: scale(1.06); filter: brightness(0.82) saturate(1.04);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), filter 500ms ease;
}
.gal.cols-1 img { aspect-ratio: 21 / 9; }
[data-in="1"] .gal img { transform: scale(1); }
.gal figure:hover img { transform: scale(1.04); filter: brightness(1) saturate(1.08); }

/* 번호 — 좌상단 계측 라벨처럼 */
.gal figcaption::before {
  content: counter(shot, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--heat-hi); margin-bottom: 9px;
}
/* 캡션 — 사진 위에 얹고, 호버하면 완전히 올라온다 */
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 24px 24px;
  font-size: 15px; line-height: 1.7; color: #DDE2EA;
  background: linear-gradient(180deg, transparent, rgba(1,1,2,0.55) 34%, rgba(1,1,2,0.92));
  transform: translateY(0); transition: background 400ms ease;
  word-break: keep-all;
}
.gal figure::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--heat-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22,0.61,0.36,1);
}
.gal figure:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .gal.cols-2, .gal.cols-3 { grid-template-columns: 1fr; }
  .gal.cols-2 > figure:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gal img { transform: none; transition: none; }
  .gal figure::after { transition: none; }
}

/* ══ 로고월 — 정부 CI는 남색이라 다크 위에서 죽는다. 흰 타일에 얹는다 ══ */
.logo-wall > div { padding: 0; gap: 0; }
.logo-wall .plate {
  width: 100%; background: #FFFFFF; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 18px; min-height: 78px;
}
.logo-wall .plate img { width: 190px; height: 46px; max-width: 100%; object-fit: contain; filter: none; opacity: 1; }
.logo-wall .meta { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 6px; }

/* ══ 소식 카드 ══ 게시판(D1)이 렌더될 레이아웃. 지금은 활동 유형으로 채운다 */
.newsgal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; }
.newsgal article {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column;
}
.newsgal .thumb { position: relative; overflow: hidden; }
.newsgal img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  filter: brightness(0.86) saturate(1.04);
  transform: scale(1.05);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), filter 500ms ease;
}
[data-in="1"] .newsgal img { transform: scale(1); }
.newsgal article:hover img { transform: scale(1.05); filter: brightness(1) saturate(1.08); }
.newsgal .cat {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: #FFFFFF; background: rgba(1,1,2,0.7); border: 1px solid rgba(255,255,255,0.22);
  padding: 6px 11px; backdrop-filter: blur(6px);
}
.newsgal .body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.newsgal h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; word-break: keep-all; }
.newsgal p { font-size: 15px; line-height: 1.8; color: #A8AFB9; word-break: keep-all; }
.newsgal article::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--heat-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 460ms cubic-bezier(0.22,0.61,0.36,1);
}
.newsgal article:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .newsgal img { transform: none; transition: none; } }

/* ══ 폼 ══════════════════════════════════════════════════════
   계측 장비 UI처럼. 라벨은 모노 소문자, 입력은 밑줄 위주.
   포커스가 어디 있는지 한눈에 보이게 액센트 선이 자란다. */
.form { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.form .row { display: grid; grid-template-columns: 200px 1fr; background: var(--surface); }
.form .row.full { grid-template-columns: 200px 1fr; }
.form label {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 24px 22px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); border-right: 1px solid var(--line); background: var(--surface-2);
}
.form label .req { color: var(--heat-hi); font-size: 15px; line-height: 1; }
.form .field { padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.7;
  padding: 11px 2px; outline: none; transition: border-color 240ms ease;
}
.form textarea { resize: vertical; min-height: 160px; }
.form select { appearance: none; cursor: pointer; }
.form select option { background: var(--ink); color: var(--text); }
.form input::placeholder, .form textarea::placeholder { color: #5C6472; }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--heat-hi); }
.form .hint { font-size: 13.5px; color: var(--muted); margin-top: 9px; line-height: 1.7; word-break: keep-all; }

/* 동의 — 개인정보 수집·이용은 법정 필수 항목이다 */
.consent { background: var(--surface); padding: 26px 22px 28px; border-top: 1px solid var(--line); }
.consent .box {
  max-height: 132px; overflow-y: auto; border: 1px solid var(--line);
  padding: 16px 18px; font-size: 14px; line-height: 1.85; color: #A8AFB9;
  background: var(--ink); word-break: keep-all;
}
.consent .box dt { font-weight: 700; color: var(--text); margin-top: 10px; }
.consent .box dt:first-child { margin-top: 0; }
.check { display: flex; align-items: center; gap: 11px; margin-top: 16px; cursor: pointer; font-size: 15.5px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box2 {
  width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid var(--line);
  display: grid; place-items: center; transition: border-color 220ms ease, background 220ms ease;
}
.check .box2::after {
  content: ""; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) scale(0); transition: transform 200ms cubic-bezier(0.22,0.61,0.36,1);
}
.check input:checked + .box2 { background: var(--heat-hi); border-color: var(--heat-hi); }
.check input:checked + .box2::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .box2 { outline: 2px solid var(--heat-hi); outline-offset: 3px; }

.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  padding: 17px 40px; border: 1px solid var(--heat-hi); background: var(--heat-hi); color: #FFFFFF;
  cursor: pointer; position: relative; overflow: hidden; transition: background 260ms ease, color 260ms ease;
}
.btn:hover { background: transparent; color: var(--heat-hi); }
.btn:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: 3px; }
.btn.ghost { background: transparent; color: #A8AFB9; border-color: var(--line); }
.btn.ghost:hover { color: var(--text); border-color: var(--heat-hi); }

@media (max-width: 760px) {
  .form .row, .form .row.full { grid-template-columns: 1fr; }
  .form label { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; }
}

/* ══ 게시판 목록 ══════════════════════════════════════════ */
.board { border-top: 1px solid var(--line); }
.board .brow {
  display: grid; grid-template-columns: 92px 1fr 132px 96px; gap: 20px; align-items: center;
  padding: 20px 8px; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: background 240ms ease, padding 240ms ease;
}
.board .brow.head { color: var(--muted); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; padding: 15px 8px; }
a.brow:hover { background: var(--surface); padding-left: 16px; padding-right: 16px; }
.board .no { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.board .subj { font-size: 16.5px; line-height: 1.6; letter-spacing: -0.02em; word-break: keep-all; }
.board .date { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.board .meta { font-family: var(--mono); font-size: 11.5px; color: var(--volt); letter-spacing: 0.08em; }
.board .empty { padding: 72px 8px; text-align: center; color: var(--muted); font-size: 15.5px; border-bottom: 1px solid var(--line); }

/* 목록 도구 — 검색·분류 */
.board-tools { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.board-tools select, .board-tools input {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14.5px; padding: 11px 14px; outline: none;
  transition: border-color 220ms ease;
}
.board-tools select { appearance: none; cursor: pointer; padding-right: 34px; }
.board-tools select option { background: var(--ink); }
.board-tools input { min-width: 220px; }
.board-tools input:focus, .board-tools select:focus { border-color: var(--heat-hi); }

/* 페이지네이션 */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 40px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; color: #A8AFB9;
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color 220ms ease, color 220ms ease;
}
.pager a:hover { border-color: var(--heat-hi); color: var(--heat-hi); }
.pager .on { background: var(--heat-hi); border-color: var(--heat-hi); color: #FFFFFF; }

@media (max-width: 760px) {
  .board .brow { grid-template-columns: 1fr 96px; gap: 8px 14px; }
  .board .no, .board .brow.head { display: none; }
  .board .subj { grid-column: 1 / -1; }
}
/* CI를 못 받은 기관은 워드마크로 세운다 — 빈 칸처럼 보이지 않게 */
.logo-wall .plate .wm {
  font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: #16204A;
  text-align: center; line-height: 1.35; word-break: keep-all;
}
/* 인증서·증빙은 사진이 아니다 — 어긋내기·크롭 없이 문서 그대로 보여준다 */
.gal.docs { margin-top: 2px; gap: 20px; }
.gal.docs > figure:nth-child(2) { margin-top: 0; }
/* 문서는 원래 비율 그대로 둔다. 칸 폭(3열)을 문서에 맞춰 좁힌 것이 해법. */
.gal.docs figure { background: #0D1017; padding: 24px 24px 0; }
/* 문서를 칸에 꽉 채우지 않는다. 높이를 묶어 아랫단을 맞추고, 남는 옆면은
   어두운 뒤판이 받는다(예전엔 뒤판이 흰색이라 그게 흰 여백으로 보였다). */
.gal.docs img {
  width: 100%; height: 330px; max-height: none;
  aspect-ratio: auto; object-fit: contain; transform: none;
  filter: brightness(0.94) contrast(1.02);
  transition: filter 400ms ease;
}
.gal.docs figure:hover img { transform: none; filter: brightness(1) contrast(1.02); }
.gal.docs figcaption { position: static; background: var(--surface); color: #A8B4C6; padding: 15px 18px 17px; margin: 24px -24px 0; }
.gal.docs figcaption::before { color: var(--heat); }

/* ══ 게시글 상세 ══════════════════════════════════════════ */
.post { border-top: 1px solid var(--line); }
.post-head { padding: 34px 4px 28px; border-bottom: 1px solid var(--line); }
.post-head .cat {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--heat-hi); border: 1px solid var(--line); padding: 6px 12px; margin-bottom: 18px;
}
.post-head h1 {
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.42; word-break: keep-all; margin-bottom: 18px;
}
.post-meta { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.post-body {
  padding: 40px 4px 48px; font-size: 16.5px; line-height: 1.95; color: #C3C9D2;
  border-bottom: 1px solid var(--line); word-break: keep-all;
}
.post-body p { margin-bottom: 22px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 { font-size: 20px; font-weight: 700; color: var(--text); margin: 36px 0 14px; letter-spacing: -0.02em; }
.post-body img { width: 100%; margin: 28px 0; border: 1px solid var(--line); }
.post-body ul { list-style: none; margin-bottom: 22px; }
.post-body li { padding-left: 18px; position: relative; margin-bottom: 8px; }
.post-body li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px; background: var(--heat-hi); }

/* 첨부파일 */
.attach { border-bottom: 1px solid var(--line); padding: 22px 4px; }
.attach .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 14px; }
.attach a {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px; margin-bottom: 6px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 15.5px;
  transition: border-color 240ms ease, background 240ms ease;
}
.attach a:last-child { margin-bottom: 0; }
.attach a:hover { border-color: var(--heat-hi); background: var(--surface); }
.attach .ext {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--heat-hi);
  border: 1px solid var(--heat-hi); padding: 4px 8px; flex: 0 0 auto;
}
.attach .size { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* 이전·다음 글 */
.post-nav { border-bottom: 1px solid var(--line); }
.post-nav a, .post-nav div {
  display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: background 240ms ease, padding 240ms ease;
}
.post-nav a:last-child, .post-nav div:last-child { border-bottom: 0; }
.post-nav a:hover { background: var(--surface); padding-left: 14px; }
.post-nav .dir { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); }
.post-nav .t { font-size: 15.5px; word-break: keep-all; }
.post-nav .none { color: var(--muted); }

/* ══ 갤러리 확대 ══════════════════════════════════════════ */
.gal figure { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(1,1,2,0.94); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 4vh 5vw;
}
.lightbox[data-open] { display: flex; }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox figcaption {
  position: absolute; left: 5vw; right: 5vw; bottom: 4vh; text-align: center;
  font-size: 15.5px; color: #C3C9D2; word-break: keep-all;
}
.lightbox .close, .lightbox .prev, .lightbox .next {
  position: absolute; background: transparent; border: 1px solid rgba(255,255,255,0.22);
  color: #FFFFFF; width: 46px; height: 46px; cursor: pointer; display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; transition: border-color 220ms ease, background 220ms ease;
}
.lightbox .close:hover, .lightbox .prev:hover, .lightbox .next:hover { border-color: var(--heat-hi); background: rgba(94,110,255,0.16); }
.lightbox .close { top: 3vh; right: 5vw; }
.lightbox .prev { left: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox .idx { position: absolute; top: 3vh; left: 5vw; font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.12em; }

/* 예시 데이터 표시 */
.demo-note {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 2px solid var(--volt); padding: 14px 16px; margin-bottom: 22px;
  font-size: 14px; line-height: 1.75; color: #A8AFB9; background: var(--surface);
}

/* ══ 마무리 CTA ══════════════════════════════════════════
   앞에서 이미 "계측해야 보인다"고 말했다. 여기서는 그 말을 반복하지 않고
   다음 행동 하나만 준다 — 우리 공장이 대상인지 확인시켜 주는 것. */
.cta.next {
  text-align: left; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
}
.cta.next > div { padding: clamp(48px, 6vw, 84px) clamp(28px, 4vw, 62px); }
.cta.next .left { border-right: 1px solid var(--line); }
.cta.next h2 {
  font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.22; word-break: keep-all; margin-bottom: 20px;
}
.cta.next .lead { font-size: 16.5px; line-height: 1.9; color: #A8AFB9; max-width: 46ch; word-break: keep-all; }

/* 대상 판정 체크리스트 */
.qual { margin-top: 34px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.qual > div { background: var(--surface); padding: 20px 22px; display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.qual .ico { width: 22px; height: 22px; color: var(--heat-hi); margin-top: 2px; }
.qual b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.qual span { font-size: 14.5px; line-height: 1.75; color: #A8AFB9; word-break: keep-all; }

/* 연락 카드 */
.reach { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.reach .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--heat); margin-bottom: 26px; }
.reach a.line {
  display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: padding 260ms ease, background 260ms ease;
}
.reach a.line:hover { padding-left: 12px; background: var(--surface); }
.reach a.line .t { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); }
.reach a.line .v { font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.02em; }
.reach .note { margin-top: 26px; font-size: 14px; line-height: 1.8; color: var(--muted); word-break: keep-all; }
.reach .btn { margin-top: 28px; align-self: flex-start; }

@media (max-width: 900px) {
  .cta.next { grid-template-columns: 1fr; }
  .cta.next .left { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* style.css의 .cta{text-align:center}가 새 2단 레이아웃을 이기지 않도록 */
.cta.next, .cta.next h2, .cta.next p, .cta.next .label { text-align: left; }

/* ══ 마무리 CTA — 배경·모션 ═════════════════════════════
   계측 장비 화면을 모티프로. 미세 그리드가 천천히 흐르고,
   스캔선이 위에서 아래로 한 번씩 훑는다. 뒤에는 궤도가 크게 떠 있다.
   전부 transform·opacity만 쓴다(컴포지터 처리). */
.cta.next { position: relative; overflow: hidden; isolation: isolate; }

/* 1) 계측 그리드 — 아주 옅게, 천천히 흐른다 */
.cta.next::before {
  content: ""; position: absolute; inset: -60px; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(94,110,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,110,255,0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(94,110,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,110,255,0.10) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  animation: gridDrift 34s linear infinite;
}
@keyframes gridDrift { to { transform: translate3d(140px, 140px, 0); } }

/* 2) 상단 광원 — 왼쪽 헤드라인 쪽을 은은하게 띄운다 */
.cta.next::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 74% at 16% 6%, rgba(94,110,255,0.16), transparent 62%),
    radial-gradient(48% 60% at 88% 96%, rgba(94,110,255,0.09), transparent 66%);
}

/* 3) 스캔선 — 계측기가 훑고 지나가는 동작 */
.cta.next .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(130,143,255,0.85), transparent);
  filter: blur(0.4px);
  animation: scanSweep 7.5s cubic-bezier(0.55,0,0.45,1) infinite;
  opacity: 0;
}
@keyframes scanSweep {
  0%   { transform: translateY(0);    opacity: 0; }
  8%   { opacity: 0.9; }
  70%  { opacity: 0.55; }
  85%  { transform: translateY(var(--h, 900px)); opacity: 0; }
  100% { transform: translateY(var(--h, 900px)); opacity: 0; }
}

/* 4) 뒤편 궤도 — 크게, 아주 옅게, 천천히 */
.cta.next .orb {
  position: absolute; right: -6%; top: 50%; width: min(760px, 58%); z-index: -1;
  transform: translateY(-50%); pointer-events: none; opacity: 0.5;
}
.cta.next .orb ellipse { fill: none; stroke: var(--heat-hi); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.cta.next .orb .r1 { opacity: 0.30; }
.cta.next .orb .r2 { opacity: 0.18; }
.cta.next .orb .run {
  stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 74 1162; filter: drop-shadow(0 0 8px rgba(130,143,255,0.95));
  animation: orbRun 11s linear infinite;
}
@keyframes orbRun { from { stroke-dashoffset: 1236; } to { stroke-dashoffset: 0; } }

/* 5) 헤드라인 — 아래에서 올라오며 액센트 선이 먼저 그어진다 */
.cta.next .label { position: relative; }
[data-in="1"] .cta.next h2, .cta.next[data-in="1"] h2,
.cta.next[data-in="1"] .lead { animation: ctaUp 760ms cubic-bezier(0.22,0.61,0.36,1) both; }
.cta.next[data-in="1"] .lead { animation-delay: 140ms; }
@keyframes ctaUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 6) 연락 줄 — 순차 등장 + 호버 시 액센트 선이 자란다 */
.cta.next[data-in="1"] .reach a.line { animation: ctaUp 640ms cubic-bezier(0.22,0.61,0.36,1) both; }
.cta.next[data-in="1"] .reach a.line:nth-of-type(1) { animation-delay: 220ms; }
.cta.next[data-in="1"] .reach a.line:nth-of-type(2) { animation-delay: 320ms; }
.cta.next[data-in="1"] .reach a.line:nth-of-type(3) { animation-delay: 420ms; }
.reach a.line { position: relative; }
.reach a.line::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--heat-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 460ms cubic-bezier(0.22,0.61,0.36,1);
}
.reach a.line:hover::after { transform: scaleX(1); }
.reach a.line:hover .v { color: var(--heat-hi); }
.reach a.line .v { transition: color 260ms ease; }

/* 7) 대상 조건 카드 — 호버 시 아이콘이 살짝 뜬다 */
.qual > div { transition: background 280ms ease; }
.qual > div:hover { background: var(--surface-2); }
.qual .ico { transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1); }
.qual > div:hover .ico { transform: translateY(-2px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .cta.next::before, .cta.next .scan, .cta.next .orb .run { animation: none; }
  .cta.next .scan { opacity: 0; }
  .cta.next[data-in="1"] h2, .cta.next[data-in="1"] .lead,
  .cta.next[data-in="1"] .reach a.line { animation: none; opacity: 1; transform: none; }
}

/* ══ 게시글 상세 — 읽기 폭과 제목 위계 ═══════════════════
   본문이 1440px를 가로지르면 한 줄이 너무 길어 읽히지 않는다.
   기사 지면처럼 읽기 폭을 잡고, 제목을 히어로에 눌리지 않게 세운다. */
.post { max-width: 940px; margin: 0 auto; border-top: 0; }
.post-head {
  padding: 8px 0 30px; border-bottom: 1px solid var(--line);
  position: relative;
}
.post-head::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 2px;
  background: var(--heat-hi);
}
.post-head .cat { margin-top: 26px; }
.post-head h1 {
  font-size: clamp(27px, 2.9vw, 40px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.34; margin-bottom: 22px;
}
.post-meta { gap: 0; align-items: center; }
.post-meta span { position: relative; padding-right: 16px; margin-right: 16px; }
.post-meta span:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--line);
}
.post-body { padding: 44px 0 52px; font-size: 17px; }
.post-body > p, .post-body > ul, .post-body > h2 { max-width: 70ch; }
.post-body h2 {
  font-size: 21px; position: relative; padding-left: 15px;
}
.post-body h2::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--heat-hi);
}
.post-body img { margin: 34px 0; }
.attach, .post-nav { padding-left: 0; padding-right: 0; }
.attach .k, .post-nav .dir { color: var(--heat); }

/* 목록으로 버튼을 본문 폭에 맞춘다 */
.post + .form-actions, .post ~ .form-actions { max-width: 940px; margin-left: auto; margin-right: auto; }
.post ~ .need-data { max-width: 940px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .post-body { font-size: 16.5px; }
}


/* ══════════════════════════════════════════════════════════════
   A안 — 명도 밴드 (TONE BANDS)
   문제: 전 페이지가 near-black 한 톤이라 섹션이 구분되지 않았다.
        측정값 밝기편차 15.8 (SDMI 91.8) — 스크롤 리듬이 없다.
   해법: 표면을 4단계로 나누고 섹션마다 번갈아 쓴다.
        컴포넌트가 전부 토큰(--surface/--line/--text)을 참조하므로
        변수만 갈아끼우면 통째로 반전된다. 새 컴포넌트를 만들지 않는다.
   ══════════════════════════════════════════════════════════════ */

/* 가장 깊은 밴드 — 인용·전환 구간 */
.tone-deep {
  --surface: #08090A;
  --surface-2: #0C0D0F;
  background: #000000;
}
/* 한 단계 뜬 밴드 — 프로세스·설명 구간 */
.tone-raise {
  --surface: #16181B;
  --surface-2: #1C1F23;
  --line: #2C2F36;
  background: #101215;
}
/* 밝은 반전 밴드 — 실적·인증처럼 '근거'를 보여주는 구간.
   문서·인증서 이미지와도 맞고, 대비가 가장 크게 벌어진다. */
.tone-light {
  --surface: #182231;
  --surface-2: #1E2A3C;
  --line: #2C3A50;
  --muted: #93A0B4;
  --heat: #7E8CFF;
  --heat-hi: #A3ADFF;
  background: #111A26;
}
.tone-light .sec-head p, .tone-light .figs i,
.tone-light .icards p, .tone-light .perf-grid dd { color: #A8B4C6; }
.tone-light .gal figcaption { background: var(--surface); }
/* 인증서·특허증 구간만 진짜 밝게 — 문서가 흰색이라 그 자리에선 자연스럽다 */
.tone-paper {
  --surface: #FFFFFF;
  --surface-2: #E9EDF4;
  --line: #D3DAE6;
  --text: #0B1220;
  --muted: #5A6577;
  --heat: #3B47B8;
  --heat-hi: #2B36A6;
  background: #E6EBF3;
  color: var(--text);
}
.tone-paper h2, .tone-paper h3, .tone-paper b, .tone-paper dt { color: var(--text); }
.tone-paper p, .tone-paper dd, .tone-paper span, .tone-paper i, .tone-paper figcaption { color: #3E4A5C; }
.tone-paper .label { color: var(--heat); }
.tone-paper .need-data { background: #FFFFFF; color: #5A6577; }

/* 밴드 경계선 — 톤이 바뀌는 지점을 또렷하게 */
.tone-light + section, section + .tone-light { border-top: 0; }
.tone-light { border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); }

/* ══ 모바일 주 메뉴 ══════════════════════════════════════
   900px 이하에서 .nav-links를 display:none 처리만 하고 대체 수단이 없어
   메뉴 전체에 접근할 수 없었다(코덱스 CRITICAL #1). 드로어를 붙인다. */
.menu-toggle { display: none; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .menu-toggle {
    display: grid; place-items: center;
    min-width: 46px; min-height: 46px;
    background: transparent; border: 1px solid var(--line);
    cursor: pointer; justify-self: end; order: 3;
    transition: border-color 220ms ease;
  }
  .menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--heat-hi); }
  .menu-toggle:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: 2px; }
  .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
    display: block; width: 20px; height: 2px; background: var(--text);
    transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1), opacity 180ms ease;
  }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; }
  .menu-toggle .bars::before { transform: translateY(-6px); }
  .menu-toggle .bars::after  { transform: translateY(6px); }
  .menu-toggle[aria-expanded="true"] .bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .bars::before { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after  { transform: rotate(-45deg); }

  .nav-links {
    display: none;
    position: fixed; inset: 72px 0 0 0; z-index: 59;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 12px var(--gutter) 40px;
    background: #010102; overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .nav-links[data-open] { display: flex; }
  .nav-links .nav-item { border-bottom: 1px solid var(--line); padding: 4px 0 14px; }
  .nav-links .nav-item > a {
    display: block; padding: 18px 0 10px;
    font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  }
  /* 하위 메뉴는 접지 않고 그대로 펼친다 — 탭이 적어 굳이 감출 이유가 없다 */
  .nav-links .submenu {
    position: static; transform: none; visibility: visible; opacity: 1;
    pointer-events: auto; display: flex; flex-direction: column;
    background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0;
  }
  .nav-links .submenu a {
    padding: 11px 0 11px 14px; font-size: 16.5px; color: #A8AFB9;
    border-left: 1px solid var(--line);
  }
  .nav-links .submenu a:hover, .nav-links .submenu a:focus-visible {
    color: var(--heat-hi); border-left-color: var(--heat-hi);
  }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { transition: none; }
}

/* 🚨 .nav의 backdrop-filter가 fixed 자식의 컨테이닝 블록을 만든다.
   .nav는 grid라서 드로어가 '가운데 컬럼(196px)' 안에 갇혔다.
   모바일에서는 블러를 끄고 불투명 배경으로 대체해 컨테이닝 블록을 없앤다. */
@media (max-width: 900px) {
  body .nav, body .nav.is-stuck, body.sub .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(1,1,2,0.97);
  }
  /* 막대의 기준점 — 없으면 ::before/::after가 .nav 기준으로 날아간다 */
  .menu-toggle { position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { left: 0; }
  .nav-links { height: auto; }
}
/* grid 컨테이너가 남아 있으면 out-of-flow 자식의 기준이 '그리드 영역'이 된다.
   모바일에서는 flex로 바꿔 기준 자체를 없앤다. */
@media (max-width: 900px) {
  body .nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  body .nav .lang { order: 2; }
  body .nav .menu-toggle { order: 3; }
  body .nav-links { width: 100vw; max-width: 100vw; left: 0; right: auto; }
}

/* ══ 사업영역 패널 스트립 ═══════════════════════════════
   색을 UI가 아니라 사진이 만든다. 전면 사진 5장을 나란히 놓고,
   호버·포커스한 패널이 넓어지며 상세가 드러난다.
   (기존 탭+텍스트 구조는 색이 나올 자리가 없었다) */
.svc-strip {
  display: flex; width: 100%; height: clamp(460px, 62vh, 640px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.svc-strip > a {
  position: relative; flex: 1 1 0; min-width: 0;
  display: block; overflow: hidden; text-decoration: none; color: #FFFFFF;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: flex-grow 620ms cubic-bezier(0.22,0.61,0.36,1);
}
.svc-strip > a:last-child { border-right: 0; }
.svc-strip > a:hover, .svc-strip > a:focus-visible { flex-grow: 2.1; }
.svc-strip > a:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: -4px; }

.svc-strip img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); filter: brightness(0.46) saturate(1.12);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), filter 520ms ease;
}
.svc-strip > a:hover img, .svc-strip > a:focus-visible img {
  transform: scale(1); filter: brightness(0.72) saturate(1.2);
}
.svc-strip .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,0.20) 0%, rgba(5,7,12,0.30) 42%, rgba(5,7,12,0.88) 100%);
  transition: background 520ms ease;
}
.svc-strip > a:hover .veil, .svc-strip > a:focus-visible .veil {
  background: linear-gradient(180deg, rgba(5,7,12,0.10) 0%, rgba(5,7,12,0.24) 40%, rgba(5,7,12,0.90) 100%);
}

.svc-strip .body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 26px 30px; display: flex; flex-direction: column;
}
.svc-strip .ico { width: 34px; height: 34px; color: #FFFFFF; margin-bottom: 18px; opacity: 0.92; }
.svc-strip .no {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.62); margin-bottom: 10px;
}
.svc-strip h3 {
  font-size: clamp(19px, 1.7vw, 25px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.34; word-break: keep-all; margin-bottom: 12px;
}
.svc-strip .en {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5); font-weight: 400; margin-top: 7px;
}
.svc-strip p {
  font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.82);
  word-break: keep-all; margin-bottom: 0;
}
/* 상세는 호버할 때만 — 평소엔 제목만 보이고, 넓어지면 내용이 드러난다 */
.svc-strip .more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 620ms cubic-bezier(0.22,0.61,0.36,1), opacity 420ms ease, margin 620ms ease;
}
.svc-strip > a:hover .more, .svc-strip > a:focus-visible .more {
  max-height: 240px; opacity: 1; margin-top: 16px;
}
.svc-strip .more ul { list-style: none; }
.svc-strip .more li {
  font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.78);
  padding: 6px 0 6px 15px; position: relative; word-break: keep-all;
}
.svc-strip .more li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px;
  background: var(--heat-hi);
}
/* 화살표 — 클릭 가능함을 알린다 */
.svc-strip .arrow {
  position: absolute; right: 22px; top: 22px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.36);
  display: grid; place-items: center; font-size: 16px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22,0.61,0.36,1), background 300ms ease;
}
.svc-strip > a:hover .arrow, .svc-strip > a:focus-visible .arrow {
  opacity: 1; transform: none; background: rgba(255,255,255,0.14);
}

@media (max-width: 1100px) {
  .svc-strip { flex-wrap: wrap; height: auto; }
  .svc-strip > a { flex: 1 1 46%; height: 340px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .svc-strip > a:hover, .svc-strip > a:focus-visible { flex-grow: 1; }
  .svc-strip .more { max-height: 240px; opacity: 1; margin-top: 14px; }
  .svc-strip .arrow { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .svc-strip > a { flex: 1 1 100%; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-strip > a, .svc-strip img, .svc-strip .more, .svc-strip .arrow { transition: none; }
  .svc-strip img { transform: none; }
}


/* ── 패널 호버 = 미니 콘텐츠 패널 ──
   불릿 텍스트만 여는 대신, 제목을 위로 올리고 유리질 판을 깔고
   실제 실적·장비 썸네일을 붙인다. (SDMI 호버 구조를 우리 데이터로) */
.svc-strip > a:hover, .svc-strip > a:focus-visible { flex-grow: 2.9; }

/* 유리질 판 — 호버할 때만 사진 위로 올라온다 */
.svc-strip .glass {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,28,0.62), rgba(8,13,22,0.78));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0; transition: opacity 520ms ease;
}
.svc-strip > a:hover .glass, .svc-strip > a:focus-visible .glass { opacity: 1; }
/* 유리판이 덮이면 사진은 오히려 더 밝게 — 색이 비쳐 보이게 */
.svc-strip > a:hover img, .svc-strip > a:focus-visible img {
  transform: scale(1); filter: brightness(0.92) saturate(1.28);
}

/* 호버 시 본문이 위로 정렬된다 */
.svc-strip .body { inset: 0; justify-content: flex-end; padding-top: 28px; }
.svc-strip > a:hover .body, .svc-strip > a:focus-visible .body { justify-content: flex-start; }
.svc-strip .body > * { position: relative; z-index: 2; }

/* 레퍼런스 썸네일 목록 */
.svc-strip .mk {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.62); margin: 20px 0 14px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.20);
}
.svc-strip .ref {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center;
  padding: 7px 0; text-decoration: none;
}
.svc-strip .ref img {
  position: static; width: 74px; height: 48px; object-fit: cover;
  transform: none; filter: none; border-radius: 2px;
  transition: none;
}
.svc-strip .ref span {
  font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.88);
  word-break: keep-all;
}
.svc-strip .ref em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-top: 4px;
}
.svc-strip > a:hover .more, .svc-strip > a:focus-visible .more { max-height: 400px; }

/* 호버 시 제목 옆으로 화살표가 붙는다 */
.svc-strip .arrow { top: 26px; right: 26px; }

@media (max-width: 1100px) {
  .svc-strip .glass { opacity: 1; }
  .svc-strip .body { justify-content: flex-start; }
  .svc-strip > a { height: auto; min-height: 420px; }
}

/* ── 호버 패널 폭 활용 ──
   썸네일이 세로 목록이라 넓어진 폭의 절반이 비었다.
   가로 3칸 카드로 바꿔 폭을 채우고, 확장 비율도 과하지 않게 낮춘다. */
.svc-strip > a:hover, .svc-strip > a:focus-visible { flex-grow: 2.3; }

.svc-strip .more { width: 100%; }
.svc-strip > a:hover .more, .svc-strip > a:focus-visible .more { max-height: 320px; }
.svc-strip .refs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.svc-strip .ref {
  display: block; grid-template-columns: none; gap: 0; padding: 0;
}
.svc-strip .ref img {
  position: static; width: 100%; height: 92px; object-fit: cover;
  transform: none; filter: none; border-radius: 2px; margin-bottom: 10px;
  transition: none; display: block;
}
.svc-strip .ref span { display: block; font-size: 13.5px; line-height: 1.5; }
.svc-strip .ref em { font-size: 10.5px; margin-top: 5px; }

/* 축소된 패널의 제목이 두 줄로 깨지지 않게 */
.svc-strip > a:not(:hover) h3 { font-size: clamp(17px, 1.35vw, 21px); }

@media (max-width: 1100px) {
  .svc-strip .refs { grid-template-columns: repeat(3, 1fr); }
  .svc-strip .ref img { height: 76px; }
}
@media (max-width: 700px) {
  .svc-strip .refs { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .svc-strip .ref img { height: 62px; }
  .svc-strip .ref span { font-size: 12.5px; }
}
/* 확대가 의미 있는 곳에만 확대 커서를 준다.
   분위기 사진 2장짜리는 확대할 게 없다 — 커서가 거짓말을 하면 안 된다. */
.gal figure { cursor: default; }
.gal.zoomable figure { cursor: zoom-in; }

/* ══ CTA 기하 — 단일 정의 (코덱스 리뷰 반영) ═══════════════
   기존엔 보정 규칙이 3곳에 흩어져 justify-content가 세 번 덮어써졌고,
   버튼의 margin-top:auto가 컨테이너 높이에 따라
   데스크톱 140px / 모바일 0px 로 정반대 결과를 냈다.
   메모와 버튼을 '액션 행' 하나로 묶어 남는 높이를 그 행 위아래로 분배한다. */
section.cta.next { padding: 0; align-items: stretch; }
section.cta.next .left { justify-content: flex-start; border-right: 1px solid var(--line); }
section.cta.next .lead { margin: 18px 0 0; max-width: 46ch; }
section.cta.next .reach { height: auto; justify-content: flex-start; }
section.cta.next .reach .note { margin: 22px 0 0; max-width: none; text-align: left; }
section.cta.next .reach .btn { margin-top: 20px; }


/* 태블릿부터 1열 — 900px이 아니라 1024px에서 전환해야 폭 절벽이 안 생긴다 */
@media (max-width: 1024px) {
  section.cta.next { grid-template-columns: 1fr; }
  section.cta.next .left { border-right: 0; border-bottom: 1px solid var(--line); }
  section.cta.next > div { justify-content: flex-start; }
  section.cta.next .orb { display: none; }
  section.cta.next .reach .note { margin: 22px 0 0; }
  section.cta.next .reach .btn { margin-top: 20px; }
}

@media (max-width: 600px) {
  section.cta.next > div { padding: 44px 20px; }
  section.cta.next .qual > div { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  section.cta.next .reach a.line { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  section.cta.next .reach .btn { width: 100%; text-align: center; }
}

/* 하이라이트가 줄 사이에서 쪼개지면 상자가 두 동강 난다.
   전체 <mark>이 6~13자라 통째로 붙여도 좁은 화면에서 넘치지 않는다.
   문단은 text-wrap: pretty로 마지막 줄 고아 어절을 줄인다. */
mark { white-space: nowrap; }
p, .lead, .svc-strip p, .post-body p, .icards p { text-wrap: pretty; }
@media (max-width: 340px) { mark { white-space: normal; } }

/* ── CTA 우측: 연락처가 칸 높이를 채운다 ──
   액션 행을 가운데 두니 빈 구간이 위·아래 둘로 늘었다.
   연락 줄 4개를 균등 분배해 칸을 채우고, 액션은 바닥에 붙여
   좌측 카드 하단선과 맞춘다. */
section.cta.next .reach { display: flex; flex-direction: column; }
section.cta.next .reach-lines {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 0;
}
section.cta.next .reach-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 26px; flex-wrap: wrap;
}
section.cta.next .reach-action .note { margin: 0; flex: 1 1 260px; }
section.cta.next .reach-action .btn { margin: 0; white-space: nowrap; }

@media (max-width: 1024px) {
  section.cta.next .reach-lines { flex: none; justify-content: flex-start; }
  section.cta.next .reach-action { margin-top: 22px; }
}
@media (max-width: 600px) {
  section.cta.next .reach-action { flex-direction: column; align-items: stretch; gap: 18px; }
  section.cta.next .reach-action .btn { width: 100%; text-align: center; }
}

/* ── 두 칸에 같은 수직 논리 ──
   위 그룹 → 가운데 여백 하나 → 아래 그룹.
   좌: (라벨·제목·리드) / 대상조건 카드
   우: (라벨·연락처) / 액션 행
   한쪽만 늘리면 밀도가 어긋나므로 양쪽 다 space-between으로 맞춘다. */
section.cta.next > div { justify-content: space-between; }
section.cta.next .left-top { display: block; }
section.cta.next .left > .qual { margin-top: clamp(32px, 4vw, 56px); }
section.cta.next .reach-lines { flex: 0 0 auto; justify-content: flex-start; }
section.cta.next .reach-action { margin-top: clamp(32px, 4vw, 56px); }

@media (max-width: 1024px) {
  section.cta.next > div { justify-content: flex-start; }
  section.cta.next .left > .qual { margin-top: 28px; }
  section.cta.next .reach-action { margin-top: 24px; }
}
/* .reach의 자식이 셋이라 space-between이 셋으로 분배됐다. 라벨+연락처를 한 그룹으로 묶는다. */
section.cta.next .reach-top { display: block; }
/* 앞선 통합 블록의 .reach{justify-content:flex-start}가 특이도로 이기고 있었다 */
@media (min-width: 1025px) {
  section.cta.next .left,
  section.cta.next .reach { justify-content: space-between; }
}
/* 우측 콘텐츠가 좌측보다 짧아 가운데 여백이 198px까지 벌어졌다.
   그 높이를 연락 줄에 흡수시킨다 — 클릭 영역도 커진다(고연령 타깃). */
@media (min-width: 1025px) {
  section.cta.next .reach a.line { padding: 40px 0; }
}

/* ── 대상조건 카드: 가로 3칸 ──
   셋은 병렬 선택지(제도 3종)다. 세로로 쌓으면 폭을 못 쓰고 블록만 길어진다.
   가로로 놓으면 좌측 높이가 줄어 우측 보정 패딩도 필요 없어진다. */
@media (min-width: 1025px) {
  section.cta.next .qual { grid-template-columns: repeat(3, 1fr); }
  section.cta.next .qual > div {
    grid-template-columns: 1fr; gap: 0; padding: 26px 24px 28px; align-content: start;
  }
  section.cta.next .qual .ico { margin: 0 0 16px; }
  section.cta.next .qual b { margin-bottom: 8px; }
  /* 카드가 짧아졌으니 연락 줄 보정 패딩을 되돌린다 */
  section.cta.next .reach a.line { padding: 26px 0; }
}
/* 보유 수량과 나열 수량이 다르면 라벨로 명시한다 — 숫자가 어긋나 보이면 신뢰가 깨진다 */
.equip-note {
  display: block; font-style: normal; font-family: var(--sans);
  font-size: 13px; letter-spacing: -0.01em; color: var(--muted); margin-top: 8px;
}

/* 메모를 뺐으므로 액션은 버튼 하나다.
   연락 줄의 값 열(전화번호가 시작하는 축)에 맞춰 정렬해 세로축을 하나 더 만든다. */
section.cta.next .reach-action { justify-content: flex-start; }
@media (min-width: 1025px) {
  section.cta.next .reach-action { margin-top: clamp(36px, 4vw, 60px); }
  section.cta.next .reach-action .btn { margin-left: calc(74px + 16px); }
  section.cta.next .reach a.line { padding: 48px 0; }
}
/* 통합 과정에서 .left의 display:flex가 빠져 space-between이 무효였다 */
section.cta.next > div { display: flex; flex-direction: column; }

/* ══ 현장갤러리 — 서비스별 분류 ══════════════════════════
   번호 순 나열은 의미가 없다. 어떤 서비스의 현장인지로 묶고,
   칩으로 걸러 볼 수 있게 한다. 관리자에서 등록할 때도 같은 분류를 쓴다. */
.gal-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.gal-filter button {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em;
  color: #A8AFB9; background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: border-color 240ms ease, color 240ms ease, background 240ms ease;
}
.gal-filter button:hover { border-color: var(--heat-hi); color: var(--heat-hi); }
.gal-filter button[aria-pressed="true"] {
  background: var(--heat); border-color: var(--heat); color: #FFFFFF;
}
.gal-filter button:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: 3px; }

.gal figure[hidden] { display: none; }
/* 분류 뱃지 — 사진마다 어떤 서비스 현장인지 */
.gal .tagchip {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: #FFFFFF; background: rgba(5,7,12,0.72); border: 1px solid rgba(255,255,255,0.24);
  padding: 6px 10px; backdrop-filter: blur(6px);
}
.gal-count { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
/* 갤러리 메타 — 일자 · 기업(비공개) · 서비스. 관리자 등록 필드와 1:1 대응한다 */
.gal figcaption .meta {
  display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.62); margin-bottom: 8px;
}
.gal figcaption .meta .co { color: rgba(255,255,255,0.82); }
.gal figcaption .ttl { display: block; font-size: 15px; line-height: 1.55; color: #DDE2EA; }
.gal figcaption .ttl b { font-weight: 700; }
/* 폼 제출 결과 안내 */
.form-status { margin-top: 18px; font-size: 15px; line-height: 1.75; color: var(--muted); word-break: keep-all; }
.form-status[data-state="ok"] {
  color: #5FD79E; border-left: 2px solid #2FA36B; padding-left: 14px;
}
.form-status[data-state="busy"] { color: var(--heat-hi); }
.form-status[data-state="warn"] {
  color: var(--text); border-left: 2px solid var(--volt); padding: 12px 16px; background: var(--surface);
}

/* ── 수치 스트립 크기 상향 ──
   타깃이 공장 대표(고연령)인데 기관명 11.5px·설명 13.5px은 작다.
   프로젝트 규칙(본문 16px·라벨 12px 이상)도 위반이었다.
   숫자는 이 섹션의 핵심이므로 크게 키운다. */
.figs > div { padding: 34px 28px 36px; }
.figs span {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--heat-hi); margin-bottom: 14px;
}
.figs b {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.2;
}
/* 진짜 수치를 강조하는 곳만 크게 — 글자(설비별·tCO₂ 등)까지 커지면 우스워진다 */
.figs.big b, .perf-sum b { font-size: clamp(42px, 4.6vw, 68px); letter-spacing: -0.04em; line-height: 1.05; }
.figs i { font-size: 16px; line-height: 1.75; color: #A8B4C6; margin-top: 14px; }
@media (max-width: 900px) {
  .figs.big b, .perf-sum b { font-size: clamp(38px, 11vw, 54px); }
  .figs span { font-size: 14px; }
  .figs i { font-size: 15.5px; }
}

/* ── 합계 스트립도 동일 기준으로 상향 ── */
.perf-sum > div { padding: 34px 28px 38px; }
.perf-sum span {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--heat-hi); margin-bottom: 14px;
}
.perf-sum b {
  font-size: clamp(42px, 4.6vw, 68px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
}
@media (max-width: 900px) { .perf-sum b { font-size: clamp(38px, 11vw, 54px); } }

/* ── 수치 강조 모션 ──────────────────────────────────────
   숫자가 이 섹션의 핵심이다. 카운트업만으로는 눈에 안 들어와
   ① 아래에서 밀려 올라오고 ② 밑줄이 좌→우로 그어지고
   ③ 카운트 중에는 은은한 광이 돈다. */
.figs > div, .perf-sum > div { position: relative; overflow: hidden; }
.figs > div::after, .perf-sum > div::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--heat-hi), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1);
}
[data-in="1"] .figs > div::after, [data-in="1"] .perf-sum > div::after { transform: scaleX(1); }
.figs > div:nth-child(2)::after, .perf-sum > div:nth-child(2)::after { transition-delay: 140ms; }
.figs > div:nth-child(3)::after, .perf-sum > div:nth-child(3)::after { transition-delay: 280ms; }
.figs > div:nth-child(4)::after { transition-delay: 420ms; }

.figs b, .perf-sum b {
  display: block;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
  transition: text-shadow 600ms ease;
}
/* 카운트가 도는 동안만 광이 돈다 — 끝나면 조용해진다 */
.figs b[data-counting], .perf-sum b[data-counting],
.figs b:has([data-counting]), .perf-sum b:has([data-counting]) {
  text-shadow: 0 0 26px rgba(130,143,255,0.55);
}
.figs > div, .perf-sum > div {
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1), transform 700ms cubic-bezier(0.22,0.61,0.36,1);
}
[data-in="1"] .figs > div, [data-in="1"] .perf-sum > div { opacity: 1; transform: none; }
.figs > div:nth-child(2), .perf-sum > div:nth-child(2) { transition-delay: 90ms; }
.figs > div:nth-child(3), .perf-sum > div:nth-child(3) { transition-delay: 180ms; }
.figs > div:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .figs > div, .perf-sum > div { opacity: 1; transform: none; transition: none; }
  .figs > div::after, .perf-sum > div::after { transform: scaleX(1); transition: none; }
  .figs b, .perf-sum b { text-shadow: none; }
}
/* 🚨 .figs span / .perf-sum span 이 <b> 안의 카운터 span까지 잡아 숫자를 14.5px로 눌렀다.
   라벨은 '직계 자식 span'만 가리키고, 숫자 안의 span은 b를 그대로 상속하게 한다. */
.figs > div > span, .perf-sum > div > span {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--heat-hi); margin-bottom: 14px;
}
.figs b span, .perf-sum b span {
  font: inherit; color: inherit; letter-spacing: inherit;
  display: inline; margin: 0;
}
.figs b i, .perf-sum b i { font: inherit; color: inherit; display: inline; margin: 0; }

/* ── 색 대비 (코덱스 HIGH #4) ──
   #828FFF 배경 + 흰 글자 = 2.87:1 로 AA(4.5:1) 미달이었다.
   배경은 --heat(#5E6AD2, 흰색 대비 4.70:1)로 내리고,
   --heat는 선·배경 전용, 전경 텍스트는 --heat-hi를 쓴다. */
.btn, .pager .on {
  background: var(--heat); border-color: var(--heat); color: #FFFFFF;
}
.btn:hover { background: transparent; color: var(--heat-hi); border-color: var(--heat-hi); }
.form input::placeholder, .form textarea::placeholder { color: #8A8F98; }
.board-tools input::placeholder { color: #8A8F98; }
/* 어두운 표면 위 작은 텍스트는 --heat 대신 --heat-hi */
.label, .tl .yr, .attach .k, .post-nav .dir, .wall-group > h3, .reach .k { color: var(--heat-hi); }
/* 스크린리더 전용 — 문서 대표 제목 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 히어로 헤드라인 연출 (코덱스 HIGH #3) ──
   기존 타이핑은 H1을 비우고 글자마다 span을 삽입해 CLS 0.425를 만들었다.
   텍스트 DOM은 건드리지 않고 clip-path로만 훑고 지나가게 한다. */
.slide h2 { min-height: 2.1em; }
.slide[data-on] h2 { animation: headlineReveal 760ms cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes headlineReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
.slide[data-on] .slide-lead { animation: headlineReveal 700ms cubic-bezier(0.22,0.61,0.36,1) 180ms both; }
@media (max-width: 420px) {
  .slide h2 { max-width: 100%; font-size: clamp(30px, 8.2vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-on] h2, .slide[data-on] .slide-lead { animation: none; clip-path: none; opacity: 1; }
}
/* 히어로 헤드라인 높이 예약 — 슬라이드마다 2줄↔3줄로 바뀌어 매 전환마다 밀렸다.
   가장 긴 슬라이드 기준으로 예약해 레이아웃이 고정된다. (CLS 0.154 → 목표 0.1 이하) */
.slide h2 { min-height: 3.6em; }
@media (min-width: 561px) { .slide h2 { min-height: 2.55em; } }
@media (min-width: 1025px) { .slide h2 { min-height: 2.4em; } }
/* 히어로 카피 블록 높이 예약 — 초기 1회 시프트(CLS 0.15)를 봉쇄한다.
   슬라이드가 2줄↔3줄로 바뀌어도 블록 높이는 고정된다. */
@media (max-width: 560px) { .hero-inner { min-height: 523px; } }
@media (min-width: 561px) and (max-width: 1024px) { .hero-inner { min-height: 480px; } }

/* ══ 개선 사례 — 금액이 주인공 ══════════════════════════
   위 보조 지표가 66px인데 정작 핵심인 절감 금액이 18px이었다.
   금액을 가장 크게 세우고 카운트업으로 올라가게 한다. */
.bcases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bcase { background: var(--surface); padding: 34px 30px 36px; position: relative; overflow: hidden; }
.bcase .co { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 18px; }
.bcase .amt {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: clamp(38px, 4.2vw, 60px); font-weight: 800; letter-spacing: -0.045em;
  line-height: 1.05; color: var(--heat-hi); font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
}
.bcase .amt em {
  font-style: normal; font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); align-self: center;
}
.bcase .what { font-size: 15px; line-height: 1.8; color: #A8B4C6; margin-top: 16px; word-break: keep-all; }
.bcase .cut {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 14.5px; color: #A8B4C6;
  border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px;
}
.bcase .cut .ico { width: 17px; height: 17px; color: var(--heat-hi); }
.bcase .cut b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* 카운트 도는 동안 광 */
.bcase .amt[data-counting] { text-shadow: 0 0 30px rgba(130,143,255,0.6); }
/* 아래에서 밀려 올라오고 하단선이 그어진다 */
.bcase::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--heat-hi), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1);
}
[data-in="1"] .bcase::after { transform: scaleX(1); }
.bcase:nth-child(2)::after { transition-delay: 150ms; }
.bcase:nth-child(3)::after { transition-delay: 300ms; }

/* 이 섹션의 보조 지표는 한 단계 낮춘다 — 금액이 주인공이다 */
.figs.sub b { font-size: clamp(30px, 3.1vw, 44px); }
.figs.sub > div { padding: 26px 24px 28px; }
.figs.sub > div > span { font-size: 13.5px; }
.figs.sub i { font-size: 14.5px; }

@media (max-width: 900px) { .bcases { grid-template-columns: 1fr; } }

/* 🚨 h1→h2 전환(문서 h1 1개 규칙) 후 .slide h1 규칙이 안 먹어 24px로 떨어졌다.
   원래 크기를 h2로 그대로 복원한다. */
.slide h2 {
  text-shadow: 0 2px 24px rgba(1,1,2,0.55);
  font-size: clamp(34px, 5.6vw, 82px); font-weight: 800; line-height: 1.07;
  letter-spacing: -0.035em; margin: 18px 0 18px; max-width: 17ch;
}
.slide h2 em { font-style: normal; color: var(--heat); }
@media (max-width: 420px) { .slide h2 { max-width: 100%; font-size: clamp(30px, 8.2vw, 38px); } }

/* 타이핑 — DOM은 로드 시 한 번만 만들고, 이후엔 글자 opacity만 켠다.
   높이가 처음부터 최종값이라 레이아웃이 흔들리지 않는다(CLS 0). */
.slide h2 .tc { opacity: 0; transition: opacity 90ms linear; }
.slide h2 .tc.on { opacity: 1; }
.type-cursor {
  display: inline-block; width: 0.06em; height: 0.86em; vertical-align: -0.08em;
  background: var(--heat-hi); margin-left: 0.06em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slide h2 .tc { opacity: 1; transition: none; }
  .type-cursor { display: none; }
}
/* 커서가 줄 끝에 붙으면 폭이 변해 재줄바꿈 → 모바일 CLS 상승.
   커서를 절대 배치해 흐름에서 빼고, 글자 span은 처음부터 자리를 차지한다. */
.slide h2 { position: relative; }
.slide h2 .type-cursor { position: absolute; margin-left: 2px; }
.slide h2 .tc { visibility: visible; }
/* 리드 문단도 슬라이드마다 2줄↔3줄이라 폰트 교체 시 한 줄이 늘며 밀렸다.
   가장 긴 슬라이드(3줄) 기준으로 예약한다. */
.slide p { min-height: 5.4em; }
@media (min-width: 561px) { .slide p { min-height: 3.6em; } }
@media (max-width: 560px) { .hero-inner { min-height: 560px; } }

/* ══ 현장갤러리 — 현장 단위 앨범 ═══════════════════════════
   낱장 나열이 아니라 '현장 한 곳 = 글 하나, 사진 여러 장' 구조.
   관리자에서도 현장별로 사진을 묶어 등록한다. */
.gal figcaption::before { content: none; }   /* 낱장 번호 제거 */

.sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.site {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); cursor: zoom-in; text-align: left;
  padding: 0; color: inherit; font: inherit; display: block; width: 100%;
}
.site:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: -3px; }
.site .cover { position: relative; overflow: hidden; }
.site .cover img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  filter: brightness(0.86) saturate(1.04); transform: scale(1.05);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), filter 500ms ease;
}
[data-in="1"] .site .cover img { transform: scale(1); }
.site:hover .cover img, .site:focus-visible .cover img { transform: scale(1.05); filter: brightness(1) saturate(1.08); }
.site .tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: #FFFFFF;
  background: rgba(5,7,12,0.72); border: 1px solid rgba(255,255,255,0.24);
  padding: 6px 10px; backdrop-filter: blur(6px);
}
/* 몇 장인지 — 여러 장 들어 있음을 알린다 */
.site .count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; color: #FFFFFF;
  background: rgba(5,7,12,0.72); border: 1px solid rgba(255,255,255,0.24);
  padding: 7px 11px; backdrop-filter: blur(6px);
}
.site .count::before {
  content: ""; width: 13px; height: 11px; border: 1.5px solid currentColor;
  border-radius: 2px; box-shadow: 3px -3px 0 -1.5px rgba(5,7,12,0.72), 3px -3px 0 currentColor;
}
.site .body { padding: 20px 20px 24px; }
.site .meta {
  display: flex; flex-wrap: wrap; gap: 0 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 9px;
}
.site .meta .co { color: #A8B4C6; }
.site h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; word-break: keep-all; }
.site p { font-size: 14.5px; line-height: 1.7; color: #A8B4C6; margin-top: 7px; word-break: keep-all; }
.site::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--heat-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 460ms cubic-bezier(0.22,0.61,0.36,1);
}
.site:hover::after, .site:focus-visible::after { transform: scaleX(1); }

@media (max-width: 1000px) { .sites { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sites { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .site .cover img { transform: none; transition: none; }
  .site::after { transition: none; }
}
.site[hidden] { display: none; }
/* 🚨 CLS 예약용 width/height 속성이 CSS height 없이 그대로 적용돼
   이미지가 속성값(예: 900px) 높이로 렌더됐다. 폭 기준으로 비율을 맞춘다. */
.site .cover img, .gal img, .newsgal img, .band-media img, .post-body img,
.ev-img img, .svc-strip .ref img { height: auto; }
/* height:100%는 aspect-ratio와 싸워 카드 전체를 먹는다. 폭 기준 비율만 쓴다. */
.site .cover img { aspect-ratio: 16 / 10; height: auto; }
.gal img { aspect-ratio: 16 / 10; height: auto; }
.gal.cols-1 img { aspect-ratio: 21 / 9; }
.newsgal img { aspect-ratio: 16 / 10; height: auto; }
.svc-strip .ref img { height: 92px; }
/* 카드는 article, 클릭 영역은 전면 버튼 하나. (button 안에 h3/p를 넣으면 브라우저가 걸러낸다) */
.site { cursor: default; }
.site .body { display: block; }
.site-open {
  position: absolute; inset: 0; z-index: 3;
  background: transparent; border: 0; cursor: zoom-in; padding: 0;
}
.site-open:focus-visible { outline: 2px solid var(--heat-hi); outline-offset: -3px; }

/* ── 제작 메모는 검토용이다 ──
   "레이아웃 확인용 예시", "로고 사용 가능 여부 확인" 같은 문장은
   고객사 고객(공장 대표)이 볼 문장이 아니다. 기본은 숨기고,
   URL에 ?review=1 을 붙였을 때만 보인다. */
.need-data { display: none; }
body[data-review] .need-data { display: flex; }
/* 검토 모드 표시 — 지금 보는 화면이 검토용임을 알린다 */
body[data-review]::before {
  content: "검토 모드 · 제작 메모 표시 중";
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--volt); color: #0B1220;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-align: center; padding: 8px 12px;
}
/* 🚨 .btn:hover(page.css)가 .btn.primary의 흰 글자를 덮어 글자색=배경색이 됐다.
   primary는 채워진 버튼이므로 호버해도 글자는 흰색을 유지한다. */
.btn.primary { background: var(--heat); border-color: var(--heat); color: #FFFFFF; }
.btn.primary:hover, .btn.primary:focus-visible {
  background: var(--heat-hi); border-color: var(--heat-hi); color: #FFFFFF;
}

/* ── 게시글 상세: 컴팩트 히어로 ──
   목록에서 제목을 누르면 큰 히어로가 다시 나와 본문이 671px 아래에서 시작했다.
   "다른 화면으로 튄" 느낌의 원인이다. 상세에서는 배너를 낮춰 본문을 바로 보여준다. */
body.post-page .page-head {
  padding-top: clamp(96px, 12vh, 132px);
  padding-bottom: clamp(24px, 3vh, 36px);
}
body.post-page .ph-title .en { font-size: clamp(30px, 3.4vw, 46px); }
body.post-page .ph-title .rule { width: clamp(30px, 4vw, 70px); }
body.post-page .page-head > p:not(.ph-title) { display: none; }  /* 설명만 숨김 — .ph-title은 제목이다 */
body.post-page .orbit-mark { opacity: 0.6; }
body.post-page main > section:first-child { padding-top: clamp(34px, 4vh, 52px); }
/* 대표 사례 8건 — 4열 2행으로 고정. auto-fit이면 폭에 따라 5·3처럼 어긋난다. */
.perf-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .perf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .perf-grid { grid-template-columns: 1fr; } }
/* 게시판 — 행 밀도를 높이고 분류 뱃지를 또렷하게 */
.board .brow { padding: 17px 8px; }
.board .brow[hidden] { display: none; }
.board .subj { font-size: 16px; }
.board .meta {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: -0.01em;
  color: var(--heat-hi); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; justify-self: start; white-space: nowrap;
}
.board .empty[hidden], .pager[hidden] { display: none; }

/* ══ 데이터 표 ══════════════════════════════════════════
   진단등급표처럼 숫자를 견주는 표. 좁은 화면에서는 가로 스크롤한다. */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.gradetbl {
  width: 100%; border-collapse: collapse; min-width: 720px;
  font-variant-numeric: tabular-nums; text-rendering: geometricPrecision;
}
.gradetbl thead th {
  background: var(--surface-2); color: var(--muted);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;
  text-align: right; padding: 16px 18px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gradetbl thead th:nth-child(1), .gradetbl thead th:nth-child(2) { text-align: left; }
.gradetbl tbody th {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--heat-hi);
  text-align: left; padding: 15px 18px; white-space: nowrap;
}
.gradetbl td {
  font-size: 15px; color: #C3C9D2; text-align: right; padding: 15px 18px; white-space: nowrap;
}
.gradetbl td:first-of-type { text-align: left; color: var(--text); }
.gradetbl td b { color: var(--text); font-weight: 700; font-size: 16.5px; }
.gradetbl tbody tr { border-bottom: 1px solid var(--line); transition: background 220ms ease; }
.gradetbl tbody tr:last-child { border-bottom: 0; }
.gradetbl tbody tr:hover { background: var(--surface-2); }
/* 소계(일) 열 강조 — 공장 대표가 가장 먼저 보는 숫자 */
.gradetbl thead th:nth-child(5), .gradetbl td:nth-child(5) {
  background: rgba(94,110,255,0.07);
}
.tbl-note {
  margin-top: 18px; font-size: 14.5px; line-height: 1.8; color: var(--muted); word-break: keep-all;
}
@media (max-width: 760px) {
  .gradetbl thead th, .gradetbl tbody th, .gradetbl td { padding: 13px 14px; font-size: 14px; }
}
/* 밴드에 영상이 들어갈 때도 이미지와 같은 연출을 쓴다 */
.band-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); filter: brightness(0.86) saturate(1.06);
  transition: transform 1400ms cubic-bezier(0.22,0.61,0.36,1), clip-path 1000ms cubic-bezier(0.22,0.61,0.36,1);
  clip-path: inset(0 0 100% 0);
}
.band[data-in="1"] .band-media video { transform: scale(1); clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .band-media video { transform: none; clip-path: none; transition: none; }
}

/* ── 오시는 길 지도 ── */
.mapwrap{ margin-top:28px; }
.mapframe{ display:block; width:100%; height:clamp(320px,42vw,480px); border:1px solid var(--line);
  background:var(--surface); filter:grayscale(.28) contrast(1.05); }
.maplinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.maplinks .btn{ font-size:13.5px; padding:10px 16px; }
/* 지도와 사무실 사진을 나란히. 사진을 21:9로 눕히면 건물이 잘려 보인다. */
.map-split{ display:grid; grid-template-columns:1fr 1.35fr; gap:20px; align-items:start; }
.office-shot{ order:-1; margin:0; border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.office-shot img{ display:block; width:100%; height:clamp(320px,42vw,480px); object-fit:cover; object-position:center 38%; }
.office-shot figcaption{
  padding:14px 16px 16px; font-size:13.5px; line-height:1.6; color:#A8B4C6; word-break:keep-all;
}
.office-shot figcaption .k{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  color:var(--heat-hi); margin-bottom:7px;
}
/* 구글 임베드는 커스텀 라벨을 못 단다. 핀은 항상 프레임 정중앙이므로
   그 옆에 직접 얹는다. 지도를 끌면 라벨만 남아 어긋나므로 드래그를 막고,
   길찾기는 아래 네이버·카카오 버튼으로 보낸다. */
.mapbox{ position:relative; }
.map-shield{ position:absolute; inset:0; display:block; cursor:default; }
.map-pinlabel{
  position:absolute; left:50%; top:50%;
  transform:translate(16px,-30px);
  display:inline-block; white-space:nowrap; pointer-events:none;
  padding:6px 11px; border-radius:4px;
  background:rgba(10,16,26,0.92); border:1px solid rgba(255,255,255,0.16);
  color:#EDF1F6; font-size:13px; letter-spacing:-0.01em;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.map-pinlabel b{ font-weight:700; color:var(--heat-hi); }
@media (max-width:520px){ .map-pinlabel{ font-size:12px; transform:translate(13px,-26px); } }
@media (max-width:900px){ .map-split{ grid-template-columns:1fr; } .office-shot img{ height:clamp(240px,46vw,320px); } }
@media (max-width:720px){ .mapframe{ height:300px; } .maplinks .btn{ flex:1 1 100%; text-align:center; } }

/* ── 회사소개 인트로 ── */
.intro{ display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:clamp(32px,4.5vw,72px);
  align-items:start; padding-bottom:clamp(36px,4vw,56px); border-bottom:1px solid var(--line); }
/* 로고 카드 — 첫 문장과 눈높이를 맞춘다 */
.intro-mark{ display:flex; align-items:center; justify-content:center;
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px); margin-top:6px;
  border:1px solid var(--line); background:linear-gradient(160deg,#141A26,#0C1017); }
.intro-mark img{ width:100%; height:auto; max-width:180px; display:block; }
.intro-copy p{ margin:0 0 18px; font-size:clamp(17.5px,1.42vw,21px); line-height:1.85; color:var(--dim); }
.intro-copy p:last-child{ margin-bottom:0; }
.intro-copy .lead{ color:var(--fg); font-size:clamp(20.5px,1.8vw,26px); line-height:1.72; }
@media (max-width:860px){
  .intro{ grid-template-columns:1fr; gap:28px; text-align:left; }
  .intro-mark{ max-width:230px; margin-top:0; padding:24px 20px; }
  .intro-mark img{ max-width:150px; }
}

/* 게시글 본문 안 이미지 — 문서 스캔본이 화면을 꽉 채우지 않게 높이를 묶는다 */
.post-fig{ margin:26px 0; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; padding:14px; cursor:zoom-in; }
.post-fig img{ display:block; max-width:100%; width:auto; height:auto;
  max-height:min(560px,64vh); object-fit:contain; }
.post-fig figcaption{ margin-top:10px; font-size:12.5px; color:var(--muted); text-align:center; }
.post-fig .zoomhint{ margin-top:8px; font:600 10.5px/1 var(--mono); letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase; }
.post-fig:hover .zoomhint{ color:var(--heat-hi); }

/* ── 회사소개 브랜드 선언 ── */
.stmt-sec{ padding-top:clamp(64px,7vw,110px); padding-bottom:clamp(56px,6vw,90px); }
.stmt{ max-width:1000px; }
.stmt-en{ margin:0 0 26px; font:800 clamp(30px,4.6vw,62px)/1.08 var(--display,inherit);
  letter-spacing:-.03em; color:var(--fg); }
.stmt-en::after{ content:''; display:block; width:64px; height:3px; margin-top:26px;
  background:linear-gradient(90deg,var(--heat-hi),transparent); }
.stmt-ko{ margin:0; font-size:clamp(17px,1.6vw,24px); line-height:1.8; color:var(--fg);
  font-weight:500; letter-spacing:-.01em; max-width:34em; }
.keys{ list-style:none; margin:clamp(44px,5vw,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.keys li{ padding:24px 20px 22px; border-right:1px solid var(--line); display:grid; gap:8px;
  transition:background 240ms ease; }
.keys li:last-child{ border-right:0; }
.keys li:hover{ background:rgba(94,110,255,.07); }
.keys .n{ font:600 11px/1 var(--mono); letter-spacing:.14em; color:var(--heat-hi); }
.keys .en{ font-size:clamp(14px,1.05vw,16.5px); font-weight:600; letter-spacing:-.01em; }
.keys .ko{ font-size:13px; color:var(--dim); }
@media (max-width:860px){
  .keys{ grid-template-columns:repeat(2,1fr); }
  .keys li:nth-child(2){ border-right:0; }
  .keys li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* 맨 위 브랜드 선언 — 페이지 첫 화면이므로 크게 연다 */
.stmt-sec{ padding-top:clamp(56px,6vw,92px); padding-bottom:clamp(52px,5.5vw,84px); }
.stmt-en{ font-size:clamp(34px,5.2vw,72px); }
/* 그 아래 인트로는 위 여백을 줄여 붙인다 */
.intro-sec{ padding-top:clamp(44px,4.5vw,68px); }
.intro{ border-top:0; }

/* 회사 개요 표 — 이 페이지에서만 2열로 묶는다 (.svc-spec 공용 스타일은 건드리지 않는다) */
.spec-2col{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.spec-2col > div{ display:grid; grid-template-columns:118px 1fr; gap:16px; align-items:baseline;
  padding:15px 18px; border-bottom:1px solid var(--line); }
.spec-2col > div:nth-child(odd){ border-right:1px solid var(--line); }
.spec-2col > div:nth-child(-n+2){ border-top:1px solid var(--line); }
.spec-2col dt{ margin:0; font:600 11.5px/1.6 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--heat-hi); }
.spec-2col dd{ margin:0; font-size:15px; line-height:1.7; }
@media (max-width:860px){
  .spec-2col{ grid-template-columns:1fr; }
  .spec-2col > div{ grid-template-columns:92px 1fr; gap:12px; padding:13px 12px; }
  .spec-2col > div:nth-child(odd){ border-right:0; }
  .spec-2col > div:nth-child(2){ border-top:0; }
}

/* ── 네 단계 궤도 다이어그램 ────────────────────────────
   네 항목은 순서가 있는 한 바퀴다. 그래서 나열이 아니라 원으로 두고,
   빛이 한 바퀴 도는 것으로 순환을 보여 준다. */
.orbit{ position:relative; width:min(640px,94vw); aspect-ratio:1; margin:clamp(36px,4vw,56px) auto 0; }
.orbit-rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit-rings .ring{ fill:none; stroke:var(--line); stroke-width:1; }
.orbit-rings .ring-mid{ stroke:rgba(94,110,255,.28); }
.orbit-rings .ring-in{ fill:rgba(94,110,255,.05); stroke:rgba(94,110,255,.16); }
.orbit-rings .spark{
  fill:none; stroke:var(--heat-hi); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:9 91; filter:drop-shadow(0 0 7px rgba(130,143,255,.85));
  transform:rotate(-90deg); transform-origin:280px 280px;
}
[data-in="1"] .orbit-rings .spark{ animation:orbit-run 7s linear infinite; }
@keyframes orbit-run{ to{ stroke-dashoffset:-100; } }

.orbit-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:38%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  overflow:hidden; background:radial-gradient(circle at 50% 35%, #3B47B8, #1B2150 78%);
  box-shadow:0 0 0 1px rgba(130,143,255,.4), 0 18px 48px rgba(20,26,64,.6);
}
/* 로고 여백이 넓은 이미지라 원 지름의 78%로 두면 시각 크기가 맞는다 */
.orbit-core img{ width:58%; height:auto; display:block; transform:translateY(2%);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.45)); }
/* 코어는 숨을 쉰다 — 정지 화면이 아니라 돌아가는 시스템으로 읽히게 */
[data-in="1"] .orbit-core{ animation:core-breathe 5.5s ease-in-out infinite; }
@keyframes core-breathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(130,143,255,.35), 0 0 0 0 rgba(94,110,255,.28), 0 18px 48px rgba(20,26,64,.6); }
  50%    { box-shadow:0 0 0 1px rgba(130,143,255,.6),  0 0 0 26px rgba(94,110,255,0), 0 18px 48px rgba(20,26,64,.6); }
}

.orbit-nodes{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
/* 네 자리를 직접 잡는다 — 노드 지름 31%, 궤도 반지름 34.5% */
.orbit-nodes li{
  position:absolute; width:30%; aspect-ratio:1;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  display:grid; place-content:center; gap:4px; text-align:center; padding:8px;
  opacity:0; transition:border-color 300ms ease, background 300ms ease, transform 300ms ease;
}
/* 코어 38%(반지름 19%) · 노드 30%(반지름 15%) · 궤도 반지름 35% → 사이 1% 여유 */
.orbit-nodes li:nth-child(1){ left:35%; top:0; }      /* 12시 */
.orbit-nodes li:nth-child(2){ left:70%; top:35%; }    /* 3시 */
.orbit-nodes li:nth-child(3){ left:35%; top:70%; }    /* 6시 */
.orbit-nodes li:nth-child(4){ left:0;   top:35%; }    /* 9시 */
[data-in="1"] .orbit-nodes li{ animation:orbit-pop 620ms cubic-bezier(.16,1,.3,1) forwards; }
.orbit-nodes li:nth-child(1){ animation-delay:120ms }
.orbit-nodes li:nth-child(2){ animation-delay:280ms }
.orbit-nodes li:nth-child(3){ animation-delay:440ms }
.orbit-nodes li:nth-child(4){ animation-delay:600ms }
@keyframes orbit-pop{ from{ opacity:0; } to{ opacity:1; } }
.orbit-nodes li:hover{ border-color:var(--heat-hi); background:#182034; transform:scale(1.05); }
.orbit-nodes .n{ font:600 clamp(11px,1vw,13px)/1 var(--mono); letter-spacing:.16em; color:var(--heat-hi); }
.orbit-nodes .en{ font-size:clamp(14px,1.35vw,18px); font-weight:700; letter-spacing:-.015em;
  line-height:1.28; word-break:keep-all; }
.orbit-nodes .ko{ font-size:clamp(13px,1.15vw,15.5px); color:var(--fg); opacity:.72; }

@media (max-width:620px){
  .orbit{ width:100%; }
  .orbit-nodes li{ width:38%; }
  .orbit-nodes li:nth-child(1){ left:31%; top:0 }
  .orbit-nodes li:nth-child(2){ left:62%; top:31% }
  .orbit-nodes li:nth-child(3){ left:31%; top:62% }
  .orbit-nodes li:nth-child(4){ left:0;   top:31% }
  .orbit-core{ width:36%; }
  .orbit-nodes .en{ font-size:13px }
  .orbit-nodes .ko{ font-size:12px }
}
@media (prefers-reduced-motion:reduce){
  [data-in="1"] .orbit-rings .spark{ animation:none; }
  .orbit-nodes li{ opacity:1; animation:none !important; }
}

/* 로고 아래가 답답하지 않게 인트로 위 여백을 준다 */
.intro-sec{ padding-top:clamp(56px,6vw,92px); }
.intro{ padding-bottom:clamp(48px,5.5vw,76px); }
/* 구분선 바로 아래에 제목이 얹히지 않게 띄운다 */
.intro-sec .sec-head{ margin-top:clamp(52px,6vw,88px); }

/* ── 메인 카피 등장 ──────────────────────────────────
   줄마다 아래에서 밀어 올린다. 마스크로 잘라 내 글자가
   보이지 않는 선 밑에서 솟는 것처럼 보이게 한다. */
.stmt-en{ display:grid; gap:.06em; }
.stmt-en .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.stmt-en .ln b{ display:block; font-weight:inherit;
  transform:translateY(105%); opacity:0; }
[data-in="1"] .stmt-en .ln b{
  animation:copy-rise 900ms cubic-bezier(.16,1,.3,1) forwards; }
.stmt-en .ln:nth-child(2) b{ animation-delay:130ms; }
@keyframes copy-rise{ to{ transform:translateY(0); opacity:1; } }

/* 두 번째 줄의 핵심어에 색을 실어 시선을 잡는다 */
.stmt-en em{ font-style:normal;
  background:linear-gradient(100deg,var(--heat-hi) 0%,#C9D0FF 55%,var(--heat-hi) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; }
[data-in="1"] .stmt-en em{ animation:copy-sheen 4.5s 900ms ease-in-out infinite; }
@keyframes copy-sheen{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }

/* 밑줄은 카피가 다 올라온 뒤에 그어진다 */
.stmt-en::after{ transform:scaleX(0); transform-origin:left; }
[data-in="1"] .stmt-en::after{ animation:copy-rule 700ms 700ms cubic-bezier(.16,1,.3,1) forwards; }
@keyframes copy-rule{ to{ transform:scaleX(1); } }

.stmt-ko{ opacity:0; transform:translateY(14px); }
[data-in="1"] .stmt-ko{ animation:copy-fade 800ms 820ms cubic-bezier(.16,1,.3,1) forwards; }
@keyframes copy-fade{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .stmt-en .ln b,.stmt-ko{ transform:none; opacity:1; animation:none !important; }
  .stmt-en::after{ transform:scaleX(1); animation:none !important; }
  [data-in="1"] .stmt-en em{ animation:none; }
}

/* ── 스크롤에 반응하는 궤도 ──────────────────────────
   섹션을 지나는 동안 궤도가 천천히 돌고 배경 빛이 따라온다.
   --p 는 스크립트가 0~1로 넣어 주는 진행도다. */
.stmt-sec{ position:relative; overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(5,7,12,.72) 0%, rgba(5,7,12,.5) 46%, rgba(5,7,12,.94) 100%),
    url('/assets/image/pages/stmt-bg.jpg');
  background-size:cover, cover;
  background-position:center, center 38%;
  background-attachment:scroll, fixed;
}
@media (max-width:900px){ .stmt-sec{ background-attachment:scroll, scroll; } }
.stmt-sec::before{
  content:''; position:absolute; inset:-20% -10% auto; height:120%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%, rgba(94,110,255,.16), transparent 70%);
  transform:translateY(calc((1 - var(--p,0)) * 22%)) scale(calc(.85 + var(--p,0) * .35));
  opacity:calc(.25 + var(--p,0) * .75);
}
.stmt-sec > *{ position:relative; z-index:1; }
.orbit-rings{ transform:rotate(calc(var(--p,0) * 26deg)); transform-origin:50% 50%; }
.orbit-nodes{ transform:rotate(calc(var(--p,0) * -8deg)); transform-origin:50% 50%; }
.orbit-nodes li{ transform:rotate(calc(var(--p,0) * 8deg)); }
.orbit-nodes li:hover{ transform:rotate(calc(var(--p,0) * 8deg)) scale(1.05); }
@media (prefers-reduced-motion:reduce){
  .orbit-rings,.orbit-nodes,.orbit-nodes li{ transform:none !important; }
  .stmt-sec::before{ transform:none; opacity:.5; }
  [data-in="1"] .orbit-core{ animation:none; }
}



/* ── 회사소개 마무리: 지금 → 다음 ─────────────────────
   사이트 공용 카드(.icards)를 그대로 쓰되, 앞으로 할 일 한 칸만
   테두리를 점선으로 끊어 "아직 하는 일이 아니다"를 표시한다. */
.vision-sec{ padding-top:clamp(72px,8vw,120px); padding-bottom:clamp(72px,8vw,120px);
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(5,7,12,.55) 0%, rgba(5,7,12,.42) 52%, rgba(5,7,12,.88) 100%),
    url('/assets/image/pages/vision-bg.jpg');
  background-size:cover, cover;
  background-position:center, center 30%;
}
.vision-sec > *{ position:relative; z-index:1; }
/* 배경 사진이 카드 뒤로 비쳐 보이게 유리처럼 만든다.
   .icards는 gap 1px에 배경색을 깔아 선을 그리므로, 여기선 선을 테두리로 바꾼다. */
.vroad{ margin-top:clamp(38px,4.5vw,62px); background:transparent; border:0; gap:14px; }
.vroad > div{ position:relative; border:1px solid rgba(140,152,180,.28);
  background:rgba(10,14,22,.52); backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); }
.vroad > div:hover{ background:rgba(16,22,34,.72); border-color:rgba(130,143,255,.5); }
.vroad > div[data-state="next"]{
  background:linear-gradient(180deg,rgba(94,110,255,.20),rgba(10,14,22,.55) 62%); }
.vroad > div[data-state="next"] .k{ color:var(--heat-hi); }
.vroad > div[data-state="next"]::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px dashed rgba(130,143,255,.45);
}
.vroad .more{ display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font:600 12.5px/1 var(--mono); letter-spacing:.06em; color:var(--heat-hi);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:4px;
  transition:border-color 240ms ease; }
.vroad .more:hover{ border-bottom-color:var(--heat-hi); }

/* ── 회사소개 맺음말 ──────────────────────────────────
   페이지를 닫는 인사. 가운데 정렬로 앞 섹션들과 리듬을 끊는다. */
.closing{ text-align:center; padding-top:clamp(72px,8vw,116px); padding-bottom:clamp(80px,9vw,128px);
  border-top:1px solid var(--line); }
.closing-mark{ margin:0 0 clamp(28px,3vw,40px); }
.closing-mark img{ width:clamp(132px,13vw,168px); height:auto; display:inline-block; opacity:.9; }
.closing-copy{ margin:0 auto; max-width:38em; font-size:clamp(16px,1.35vw,20px); line-height:2.05;
  color:var(--fg); letter-spacing:-.01em; word-break:keep-all; }
.closing-sign{ margin:clamp(26px,3vw,38px) 0 0; font:600 12.5px/1 var(--mono);
  letter-spacing:.14em; color:var(--dim); }
.closing-sign b{ margin-left:6px; font-size:15px; letter-spacing:.06em; color:var(--fg); }
.closing-sign::before{ content:''; display:block; width:38px; height:1px; margin:0 auto 20px;
  background:var(--heat-hi); }

/* 사진 매수는 보조 정보 — 눈에 먼저 띄지 않게 */
.site .count{ opacity:.72; }
.site:hover .count{ opacity:1; }

/* 고정 글 표시 */
.brow .pin-no{ font-style:normal; font-family:var(--font); font-size:11.5px;
  font-weight:700; color:var(--heat-hi); border:1px solid var(--heat); padding:3px 7px; }

/* ── 320px 대응 (코덱스 모바일 리뷰 High #2·#3) ──────────
   타이핑 효과가 공백을 NBSP로 바꿔 긴 영문 제목이 안 접힌다.
   그리고 flex 자식의 기본 min-width:auto 때문에 탭이 부모보다 넓어진다. */
.slide, .slide h2 { min-width: 0; max-width: 100%; }
.slide h2 { overflow-wrap: anywhere; }
.slide h2 .tc { white-space: normal; }
.sibbar, .sibs { min-width: 0; }
@media (max-width: 420px) {
  .sibs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .sibs::-webkit-scrollbar { display: none; }
}

/* 갤러리 필터 칩 — 손가락 목표 44px (코덱스 리뷰 Low #8) */
.gal-filter button { min-height: 44px; display: inline-flex; align-items: center; }

/* 서비스 카드 이미지가 카드보다 커서 320px에서 문서 폭을 밀어냈다.
   (코덱스 모바일 리뷰 High #2 — 실제 원인은 히어로가 아니라 이 카드였다) */
.svc-strip > a { overflow: hidden; }
.svc-strip > a > img { max-width: 100%; }

/* .film-note가 좁은 화면에서도 2열을 고집해 320px에서 문서 폭을 밀어냈다.
   (코덱스 모바일 리뷰 High #2의 실제 원인) */
@media (max-width: 420px) {
  .film-note { grid-template-columns: 1fr; }
}

/* 로고월·페이지 헤더 배경이 320px에서 넘쳤다 */
@media (max-width: 420px) {
  .logo-wall { grid-template-columns: 1fr; }
}
.ph-bg { max-width: 100%; }
.page-head { overflow: hidden; }

/* ── 모바일 상단 점유 줄이기 (코덱스 리뷰 Medium #4) ─────
   헤더 83 + 탭바 78 = 161px로 화면의 24%를 늘 가렸다.
   탭은 햄버거를 열지 않고 옆 페이지로 가는 유일한 길이라 남기고,
   하는 일이 없는 breadcrumb만 감춘다. */
@media (max-width: 760px) {
  .sibbar .crumb { display: none; }
  .sibbar { padding-top: 6px; padding-bottom: 6px; }
  .sibs { margin-top: 0; }
}

/* ── 등급표: 밀어야 한다는 것을 보이게 (코덱스 리뷰 Medium #6) ──
   785px 표에서 348px만 보였다. 5번째 열(소요일수)이 화면 밖이라
   강조해 둔 핵심 정보가 없는 것과 같았다. */
.tablewrap { position: relative; }
.tablewrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46px;
  background: linear-gradient(90deg, transparent, var(--surface));
  pointer-events: none; opacity: 1; transition: opacity 240ms ease;
}
.tablewrap[data-end="1"]::after { opacity: 0; }
.table-hint {
  display: none; margin: 10px 2px 0; font: 500 12.5px/1.6 var(--font);
  color: var(--muted); letter-spacing: -.01em;
}
.table-hint::before { content: "↔ "; color: var(--heat-hi); font-weight: 700; }
@media (max-width: 860px) {
  .table-hint { display: block; }
  /* 등급 열은 밀어도 남아 있어야 어느 줄인지 안다 */
  .gradetbl thead th:first-child,
  .gradetbl tbody th:first-child,
  .gradetbl td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface-2);
    box-shadow: 1px 0 0 var(--line);
  }
}

/* 모바일 헤더 — 상하 여백 26px씩이 로고(42px)보다 컸다.
   스크롤 중 늘 떠 있는 영역이라 여백부터 줄인다. */
@media (max-width: 760px) {
  /* body .nav 규칙이 위에 있어 특이도를 맞춰야 이긴다 */
  body .nav, body.sub .nav { padding-top: 12px; padding-bottom: 12px; }
  .brand-logo { height: 34px; }
}

/* ── 서비스 카드 호버 부드럽게 ─────────────────────────
   원인이 넷 겹쳐 있었다.
   ① flex-grow 트랜지션 — 매 프레임 카드 5개를 다시 배치하고 이미지를 다시 그린다
   ② .body { transition: all } — 바뀌지도 않는 속성까지 전부 감시
   ③ img filter: brightness() — 이미지 전체를 매 프레임 다시 칠한다
   ④ .more max-height + .glass backdrop-filter — 둘 다 프레임마다 비싸다
   레이아웃·페인트를 건드리지 않는 transform·opacity 위주로 바꾼다. */

/* 폭 변화는 유지하되(연출의 핵심) 브라우저에 미리 알려 준비시킨다 */
.svc-strip > a { will-change: flex-grow; contain: paint; }
.svc-strip > a:hover, .svc-strip > a:focus-visible { flex-grow: 2.1; }

/* 이미지는 확대만 한다. 밝기는 위에 덮인 veil이 대신 처리한다 */
.svc-strip img {
  filter: none;
  transition: transform 620ms cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.svc-strip > a:hover img, .svc-strip > a:focus-visible img { transform: scale(1); filter: none; }
.svc-strip .veil { transition: opacity 420ms ease; will-change: opacity; }

/* 어둡게 눌러 두던 몫을 veil로 옮긴다 (페인트 1회로 끝난다) */
.svc-strip > a::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 원래 filter: brightness(0.46)가 만들던 어둡기를 그대로 재현한다 */
  background: rgba(2,4,9,0.60);
  transition: opacity 420ms ease;
}
.svc-strip > a:hover::before, .svc-strip > a:focus-visible::before { opacity: 0.5; }

/* 펼쳐지는 목록 — max-height 대신 transform·opacity */
.svc-strip .more {
  max-height: none; overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
  height: 0;
}
.svc-strip > a:hover .more, .svc-strip > a:focus-visible .more {
  opacity: 1; transform: none; height: auto; margin-top: 14px;
}

/* backdrop-filter는 프레임마다 배경을 다시 흐린다 — 반투명 배경으로 대체 */
.svc-strip .glass { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .svc-strip > a, .svc-strip img, .svc-strip .more, .svc-strip .veil { transition: none; }
}

/* ── 영문판 보정 ────────────────────────────────────────
   영문 문구는 국문보다 길다. 국문 레이아웃이 버티지 못하는 곳만 여기서 덮는다.
   선택자는 <html lang="en">에만 걸리므로 국문 화면에는 영향이 없다. */
@media (max-width:520px){
  html[lang="en"] .map-pinlabel{
    white-space:normal; text-align:center;
    max-width:min(52vw,200px);
    transform:translate(-50%,14px);
  }
}