/* Pretendard는 HTML <link>로 선로드한다 — @import는 직렬 로딩이라 렌더가 늦어진다 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* A안 — 미드나잇 시네마틱. 액센트는 일렉트릭 블루 하나로 절제한다.
     오렌지·골드 계열은 저가 인상을 주기 쉬워 배제했다. */
  /* 위키 레퍼런스 DB(awesome-design-md)의 Linear 값 기반.
     근사 블랙 캔버스 + 라벤더 블루 단일 액센트 + 헤어라인 보더 = "quietly luxurious".
     기존의 쨍한 #5B8CFF는 저가 인상이 있어 라벤더 블루로 교체했다. */
  --ink: #05070C;
  --surface: #0E1219;
  --surface-2: #151B25;
  --line: #232C3A;
  --text: #F7F8F8;
  --muted: #8A8F98;
  --heat: #5E6AD2;      /* Linear 라벤더 블루 — 단일 액센트 */
  --heat-hi: #828FFF;   /* hover */
  --volt: #D0D6E0;      /* 액센트의 옅은 변주 (별도 색상 아님) */
  --gutter: clamp(20px, 5vw, 88px);
  /* 🚨 IBM Plex Mono에는 한글 글리프가 없다. 폴백을 안 끼우면 한글이 굴림으로 떨어진다.
     ('기존 방식', '에어로원 방식' 같은 한글 라벨에서 실제 발생) */
  --mono: 'IBM Plex Mono', 'Pretendard Variable', Pretendard, 'Malgun Gothic', ui-monospace, monospace;
  /* 📐 타이포 원칙: 타겟이 공장 경영진(고연령)이라 본문 최소 16px, 라벨도 12px 이상으로 잡는다.
     작고 촘촘한 테크 스타일보다 읽히는 것이 우선한다. */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 🚨 한글 단어 깨짐 방지 — body에만 주면 일부 요소에서 상속이 끊긴다.
   ('모집합니다. 아래 연 / 락처로' 처럼 어절 중간에서 잘리는 현상 실제 발생) */
*, *::before, *::after { word-break: keep-all; overflow-wrap: break-word; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  word-break: keep-all;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.label {
  text-shadow: 0 1px 12px rgba(1,1,2,0.7);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--heat);
}

/* ── 헤더 ── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: grid;                        /* 3열 고정 — 메뉴가 화면 정중앙에 온다 */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px var(--gutter);          /* 20 → 26. 답답함 해소 */
  /* 최상단에서는 완전히 투명하다. 영상이 헤더 뒤까지 온전히 보여야 한다.
     스크롤이 시작되면(.is-stuck) 그때 블러와 배경이 켜진다. */
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 260ms ease, backdrop-filter 260ms ease, border-color 260ms ease, padding 260ms ease;
}
.nav.is-stuck {
  background: rgba(1,1,2,0.72);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(35,37,42,0.8);
  padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.brand span { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.2em; }
.nav-links { display: flex; gap: 42px; align-items: center; justify-self: center; }  /* 30 → 42 */
.nav-links a {
  font-size: 17px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color 180ms ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); }
.lang { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.12em; color: var(--muted); justify-self: end;
  display: inline-flex; align-items: center; gap: 2px; }
/* 언어 전환은 링크다. 스타일을 안 주면 브라우저 기본 파란색(#0000EE)이 나와
   어두운 헤더에서 대비 2.1:1로 사실상 안 보인다. 터치영역도 함께 키운다. */
.lang a { color: var(--muted); text-decoration: none; padding: 10px 9px; border-radius: 5px;
  transition: color 160ms ease, background 160ms ease; }
.lang a:hover { color: var(--text); background: rgba(247,248,248,0.10); }
.lang a:focus-visible { outline: 2px solid var(--accent, #5E6AD2); outline-offset: 2px; color: var(--text); }
.lang b { padding: 10px 9px; }
.lang b { color: var(--text); font-weight: 600; }
/* 터치 기기엔 호버가 없다. 눌리는 것임을 테두리로 드러낸다. */
@media (max-width: 900px) {
  .lang a, .lang b { padding: 11px 12px; }
  .lang a { border: 1px solid var(--line); }
}

/* ── 히어로 ── */
.hero { position: relative; height: 100svh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
#hud { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;                 /* 캔버스(1)보다 위, 카피(3)보다 아래 — 계측 태그가 글자를 덮지 않게 한다 */
  background:
    /* 카피가 놓이는 좌하단을 집중적으로 눌러 가독성을 확보한다 */
    /* 좌하단만 국소적으로 눌러 카피 가독성을 확보한다. 화면 전체를 덮으면 영상이 죽는다. */
    radial-gradient(90% 62% at 8% 92%, rgba(1,1,2,0.90) 0%, rgba(1,1,2,0.62) 42%, transparent 72%),
    linear-gradient(180deg, rgba(1,1,2,0.42) 0%, transparent 26%, transparent 52%, rgba(1,1,2,0.72) 88%, var(--ink) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 3; width: 100%; padding: 0 var(--gutter) clamp(40px, 7vh, 76px); }
.hero h1 {
  font-size: clamp(38px, 6.6vw, 92px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 22px 0 20px;
  max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--heat); }
.hero p {
  color: #B6C4D4; font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75; max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  font-size: 15.5px; min-height: 48px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none;
  padding: 14px 24px; border: 1px solid var(--line);
  color: var(--text); background: transparent;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--heat); transform: translateY(-2px); }
.btn.primary { background: var(--heat); border-color: var(--heat); color: #FFFFFF; }
.btn.primary:hover { background: var(--heat-hi); }

/* 계측 수치 스트립 — 라벨을 위로 올리고 단위를 베이스라인에 맞춘다.
   (단위가 위첨자처럼 떠 보이고 라벨이 값 아래 흩어져 어색하다는 지적 반영) */
.readout { position: relative; z-index: 3; margin: 46px var(--gutter) 0; border-top: 1px solid var(--line); }
.readout-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.readout-row > div { padding: 34px 34px 36px 0; border-right: 1px solid var(--line); }
.readout-row > div + div { padding-left: 34px; }   /* 세로선과 글자 사이 숨통 */
.readout-row > div:last-child { border-right: none; }
.rl {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; color: var(--muted); margin-bottom: 18px;
}
.readout b {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
/* 자격·인증 문구 판본 — 숫자가 아니라 국문 문구가 들어가는 경우 */
.readout-row.is-cred b {
  display: block; font-family: var(--sans);
  font-size: clamp(19px, 1.55vw, 25px); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.38;
  word-break: keep-all; line-break: strict;
}
.readout b i {
  font-style: normal; font-size: 17px; letter-spacing: 0.02em;
  color: var(--volt); font-weight: 400;
}

@media (max-width: 760px) {
  .readout-row { grid-template-columns: 1fr; }
  .readout-row > div { border-right: none; border-bottom: 1px solid var(--line); }
  .readout-row > div + div { padding-left: 0; }   /* 1열이 되면 세로선이 없어 들여쓰기가 어긋난다 */
  .readout-row > div:last-child { border-bottom: none; }
}

/* ── 공통 섹션 ── */
section { padding: clamp(76px, 11vh, 132px) var(--gutter); }
.sec-head { margin-bottom: 52px; max-width: 60ch; }
.sec-head h2 {
  font-size: clamp(26px, 3.3vw, 44px); font-weight: 800;
  letter-spacing: -0.032em; line-height: 1.2; margin: 18px 0 14px;
}
.sec-head p { color: var(--muted); font-size: 17px; line-height: 1.85; }

/* ── 사업영역 ── */
.svc { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 88px 1.1fr 1.4fr;
  gap: 28px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  transition: background 220ms ease;
}
.svc-row:hover { background: var(--surface); }
.svc-row .no { font-family: var(--mono); font-size: 12px; color: var(--volt); letter-spacing: 0.14em; padding-top: 7px; }
.svc-row h3 { font-size: clamp(20px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.35; }
.svc-row h3 span { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.16em; margin-top: 9px; }
.svc-row p { color: #A8AFB9; font-size: 16.5px; line-height: 1.85; }
.svc-row ul { list-style: none; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-row li {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); padding: 5px 10px;
}

/* ── 프로세스 ── */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.flow > div { background: var(--surface); padding: 26px 20px 30px; position: relative; }
.flow .step { font-family: var(--mono); font-size: 12.5px; color: var(--heat); letter-spacing: 0.16em; }
.flow .step-title { font-size: 18px; font-weight: 700; margin: 14px 0 9px; letter-spacing: -0.02em; }
.flow p { font-size: 15px; color: #A8AFB9; line-height: 1.8; }

/* ── 실적 ── */
.works { border-top: 1px solid var(--line); }
.works a, .works div.work {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 22px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.works .yr { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.works .ttl { font-size: 16px; line-height: 1.6; }
.works .tag { font-family: var(--mono); font-size: 11px; color: var(--volt); }

/* ── 영상 섹션 ── */
.film { position: relative; padding: 0; border-top: 1px solid var(--line); }
.film-stage {
  position: relative; height: clamp(360px, 62vh, 620px);
  background: linear-gradient(135deg, #0B1119, #16202D 55%, #0B1119);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.film-copy h2 { font-size: clamp(24px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.film-copy p { color: #A9BACC; margin-top: 16px; font-size: 15px; line-height: 1.8; }
.film-note {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);   /* 하단선이 없어 카드가 허공에 뜬 것처럼 보였다 */
}
.film-note > div { background: var(--ink); padding: 34px 28px 38px; }
.film-note b { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: 0.13em; color: var(--heat-hi); margin-bottom: 16px; }
.film-note p { font-size: 16px; color: #B4BAC4; line-height: 1.85; }

/* ── CTA · 푸터 ── */
.cta { text-align: center; border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(28px, 4vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.18; }
.cta p { color: #A8AFB9; margin: 18px auto 34px; max-width: 44ch; line-height: 1.85; font-size: 17px; }

footer { border-top: 1px solid var(--line); padding: 40px var(--gutter) 56px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; }
footer p, footer address {
  font-style: normal; font-size: 14.5px; color: #A8AFB9; line-height: 1.95;
}
footer .co { color: var(--text); font-weight: 700; font-size: 16.5px; margin-bottom: 12px; }

/* 시안 표기 */
/* 제작 표기는 검토용이다. body[data-review]일 때만 보인다. */
.stamp { display: none; }
body[data-review] .stamp {
  display: block;
  position: fixed; right: 14px; bottom: 14px; z-index: 80;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--muted); border: 1px solid var(--line);
  background: rgba(1,1,2,0.86); padding: 7px 11px;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .readout { grid-template-columns: 1fr; }
  .readout div { border-right: none; border-bottom: 1px solid var(--line); }
  .readout div:last-child { border-bottom: none; }
  .svc-row { grid-template-columns: 1fr; gap: 14px; }
  .flow { grid-template-columns: 1fr 1fr; }
  .works a, .works div.work { grid-template-columns: 1fr; gap: 6px; }
  .film-note { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ── 시그니처 파이프라인 ── */
.pipeline { display: grid; grid-template-columns: 1fr 1.15fr 1fr; border: 1px solid var(--line); background: var(--surface); }
.pipe-in { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 34px; border-right: 1px solid var(--line); }
.chip { position: relative; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; border: 1px solid var(--line); padding: 15px 17px; color: #B9C6DA; }
.chip::after { content: "↓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--heat); font-size: 12px; }
.chip:last-child::after { content: "→"; }
.pipe-core { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 24px; border-right: 1px solid var(--line); background: radial-gradient(60% 60% at 50% 50%, rgba(91,140,255,0.10), transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.core-label { position: relative; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.6; }
.core-label span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0.18em; margin-top: 8px; }
.pipe-out { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 40px 34px; }
.pipe-out div { display: flex; flex-direction: column; gap: 6px; }
.pipe-out div > span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; color: var(--muted); }
.pipe-out b span { font: inherit; color: inherit; letter-spacing: inherit; }
.pipe-out b { font-family: var(--mono); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; color: var(--heat); letter-spacing: -0.02em; }

/* ── 기존 vs 에어로원 ── */
.compare { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: none; }
.compare > div { background: var(--ink); padding: 26px 32px; }
.compare .label { margin-bottom: 12px; }
.compare .old p { color: #767E8B; font-size: 15.5px; line-height: 1.8; text-decoration: line-through; text-decoration-color: rgba(120,135,155,0.45); }
.compare .new p { color: var(--text); font-size: 16.5px; line-height: 1.85; font-weight: 600; }
.compare .old .label::before { background: #566373; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
[data-reveal][data-in="1"] { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .film-note { grid-template-columns: 1fr 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .pipe-in, .pipe-core { border-right: none; border-bottom: 1px solid var(--line); }
  .compare { grid-template-columns: 1fr; }
}


/* ── 스크롤 순차 점등 ──────────────────────────────
   .pipeline[data-stage] 이 0→3으로 바뀌며 INPUT → CORE → OUTPUT 순으로 켜진다.
   꺼진 상태는 지워지는 게 아니라 '아직 계측 전'으로 흐릿하게 남는다. */
.pipeline .chip,
.pipeline .core-label,

.pipeline .pipe-out div {
  opacity: 0.22;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pipeline .chip { transform: translateX(-10px); }
.pipeline .pipe-out div { transform: translateY(10px); }

.pipeline[data-stage="1"] .chip,
.pipeline[data-stage="2"] .chip,
.pipeline[data-stage="3"] .chip { opacity: 1; transform: none; }
.pipeline[data-stage="1"] .chip:nth-child(2) { transition-delay: 110ms; }
.pipeline[data-stage="1"] .chip:nth-child(3) { transition-delay: 220ms; }

.pipeline[data-stage="2"] .core-label,
.pipeline[data-stage="3"] .core-label,
.pipeline[data-stage="3"] .core-label { opacity: 1; }

.pipeline[data-stage="3"] .pipe-out div { opacity: 1; transform: none; }
.pipeline[data-stage="3"] .pipe-out div:nth-child(2) { transition-delay: 120ms; }
.pipeline[data-stage="3"] .pipe-out div:nth-child(3) { transition-delay: 240ms; }

/* 코어를 지나는 진행 게이지 — 스크롤 진행률(--prog)에 직접 묶인다 */
.pipe-core::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--prog, 0) * 100%);
  background: linear-gradient(90deg, transparent, var(--heat));
}

/* 히어로 패럴랙스가 걸리는 요소는 합성 레이어로 올린다 */
#hud, .hero-inner { will-change: transform; }


/* ── 히어로 배경영상 ──────────────────────────────
   HUD 캔버스 아래 깔린다. 카피 가독성을 위해 살짝 어둡게 눌러 쓴다.
   reduced-motion에서는 영상을 감추고 poster 이미지만 남긴다. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 900ms ease;
  filter: brightness(0.86) saturate(1.08) contrast(1.04);
}
.hero-media video[data-on] { opacity: 1; }
#hud { z-index: 1; opacity: 0.5; }
@media (max-width: 760px) {
  .hero { background: #05080C url("/assets/image/hero-v1-poster.jpg") center/cover no-repeat; }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(5,8,12,0.45); z-index: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero { background: #05080C url("/assets/image/hero-v1-poster.jpg") center/cover no-repeat; }
}

/* ── 브랜드 로고 ── */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 42px; width: auto; display: block; }
.brand span { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.2em; }

/* ── 히어로 4슬라이드 (SDMI 방식) ──────────────────
   영상은 계속 흐르고, 그 위 카피만 1→2→3→4로 교체된다.
   높이는 가장 긴 슬라이드에 맞춰 고정해 레이아웃이 흔들리지 않게 한다. */
/* 슬라이드를 같은 그리드 칸에 겹쳐 쌓는다.
   absolute + 고정높이(26vh)로 두면 카피가 길어질 때 아래 버튼을 덮는다(실측 -5.8px 겹침). */
.slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(12px);
  transition: opacity 260ms ease, transform 260ms ease;   /* 나갈 때는 빠르게 */
  pointer-events: none;
  visibility: hidden;
}
.slide[data-on] {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 520ms ease 180ms, transform 520ms ease 180ms;  /* 들어올 때는 이전 장이 사라진 뒤 */
}
.slide h1 {
  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 h1 em { font-style: normal; color: var(--heat); }
.slide p { text-shadow: 0 1px 14px rgba(1,1,2,0.6); color: #DCE1E8; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.8; max-width: 44ch; }

/* 슬라이드 인디케이터 — 진행 게이지가 차오른다 */
.slide-nav { display: flex; gap: 10px; margin-top: 34px; }
.dot {
  width: 46px; height: 3px; padding: 0; border: none; cursor: pointer;
  background: rgba(159,184,232,0.22); position: relative; overflow: hidden;
}
.dot i { position: absolute; inset: 0 100% 0 0; background: var(--heat); transition: none; }
.dot[data-on] i { animation: fill 6s linear forwards; }
@keyframes fill { to { inset: 0 0 0 0; } }
.dot:focus-visible { outline: 2px solid var(--heat); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .dot[data-on] i { animation: none; inset: 0 0 0 0; }
  .slide { transition: none; }
}


/* ── 시스템 모델 링 (이전 연출 복원) ──────────────
   로고 궤도는 섹션 배경으로 내리고, 코어는 조용한 회전 링으로 되돌렸다. */
/* ── 시스템 모델 코어 — 실제 로고 궤도 ────────────────
   흉내낸 타원이 아니라 로고에서 떼어낸 궤도 그 자체를 쓴다.
   궤도는 천천히 공전하고, 안쪽 링이 반대로 돌아 계측 장비의 느낌을 남긴다. */
.core-ring {
  position: absolute; width: 208px; height: 208px; border-radius: 50%;
  border: 1px solid rgba(94,106,210,0.22);
  box-shadow: 0 0 0 30px rgba(94,106,210,0.03), inset 0 0 70px rgba(94,106,210,0.08);
  animation: spin 26s linear infinite reverse;
}
.core-ring::after {
  content: ""; position: absolute; inset: 26px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: rgba(208,214,224,0.42);
  animation: spin 13s linear infinite;
}
.pipeline .core-ring { opacity: 0.22; transition: opacity 620ms ease; }
.pipeline[data-stage="2"] .core-ring, .pipeline[data-stage="3"] .core-ring { opacity: 1; }



@media (prefers-reduced-motion: reduce) {
  .core-ring, .core-ring::after, #signature::before { animation: none !important; }
}

/* ── 로고 창(窓) — 로고 실루엣 안으로 영상이 비친다 ──────────
   mask-image로 로고 알파를 잘라내 그 안에서만 영상이 보이게 한다.
   장식용 이미지가 아니라 브랜드 심볼 자체가 화면 장치가 된다. */
.logo-window {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 82%); aspect-ratio: 987 / 588;
  -webkit-mask-image: url("/assets/logo/aeroone-white.png");
          mask-image: url("/assets/logo/aeroone-white.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  z-index: 1;
  filter: drop-shadow(0 0 40px rgba(94,106,210,0.35));
}
.logo-window video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 마스크 영상이 주인공이므로 카피는 아래로 내리고 조용하게 */
.film-stage { align-items: center; }
.film-copy { z-index: 2; padding-bottom: 34px; }
.film-copy h2 { font-size: clamp(22px, 2.6vw, 34px); }
#film-canvas { opacity: 0.45; }

@media (max-width: 760px) {
  .logo-window { width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .core-ring, .core-ring::after { animation: none !important; }
}

/* ── 보유 계측장비 ──────────────────────────────
   회사소개서의 실제 보유장비 15종. "실측 기반"이라는 주장의 물증이라
   장식 없이 목록 그대로 보여주는 편이 설득력이 높다. */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.equip-grid > div { background: var(--surface); padding: 18px 20px; }
.equip-grid b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.equip-grid span { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 6px; letter-spacing: 0.04em; }
footer .foot-grid > div { min-width: 240px; }
footer a { color: var(--volt); text-decoration: none; border-bottom: 1px solid rgba(208,214,224,0.25); }
footer a:hover { color: var(--heat-hi); }
@media (max-width: 900px) { .equip-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .equip-grid { grid-template-columns: 1fr; } }

/* ── 시방서 메뉴 구조 (1차 4 · 2차 11) ────────────────
   호버·포커스로 2차 메뉴가 열린다. 키보드 사용자도 focus-within으로 접근 가능. */
.nav-item { position: relative; }
.nav-item > a { display: inline-block; padding: 10px 0; }
.submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  display: grid; min-width: 190px; padding: 10px 0;
  background: rgba(15,16,17,0.97); border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.submenu a {
  padding: 12px 22px; font-size: 15.5px; white-space: nowrap;
  border-bottom: none; color: var(--muted);
}
.submenu a:hover, .submenu a:focus-visible { color: var(--text); background: rgba(94,106,210,0.12); }

/* ── 차별점 강조 ────────────────────────────────
   DWSIM 시뮬레이션 · 자체 AI는 이 회사의 유일한 차별점이다.
   본문에서 눈이 먼저 닿도록 액센트를 준다. 남발하면 효과가 죽으므로 이 두 축에만 쓴다. */
mark {
  background: none;
  color: var(--heat-hi);
  font-weight: 700;
  padding: 0 1px;
  box-shadow: inset 0 -0.34em 0 rgba(94,106,210,0.16);
}
.chip.is-key {
  border-color: rgba(94,106,210,0.55);
  color: var(--text);
  background: rgba(94,106,210,0.09);
}
.chip.is-key::after { color: var(--heat-hi); }
.flow .step.is-key { color: var(--heat-hi); }



/* ── 보유장비 모션 ────────────────────────────────
   15종이 한꺼번에 나타나면 목록이 벽처럼 보인다.
   계측기가 하나씩 잡히듯 순차로 올라오게 하고, 호버 시 액센트 선이 그어진다. */
.equip-grid > div {
  position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.22,0.61,0.36,1), transform 520ms cubic-bezier(0.22,0.61,0.36,1), background 220ms ease;
}
.equip[data-in="1"] .equip-grid > div { opacity: 1; transform: none; }
.equip-grid > div:nth-child(n)   { transition-delay: 0ms; }
.equip-grid > div:nth-child(2)   { transition-delay: 45ms; }
.equip-grid > div:nth-child(3)   { transition-delay: 90ms; }
.equip-grid > div:nth-child(4)   { transition-delay: 135ms; }
.equip-grid > div:nth-child(5)   { transition-delay: 180ms; }
.equip-grid > div:nth-child(6)   { transition-delay: 225ms; }
.equip-grid > div:nth-child(7)   { transition-delay: 270ms; }
.equip-grid > div:nth-child(8)   { transition-delay: 315ms; }
.equip-grid > div:nth-child(9)   { transition-delay: 360ms; }
.equip-grid > div:nth-child(10)  { transition-delay: 405ms; }
.equip-grid > div:nth-child(11)  { transition-delay: 450ms; }
.equip-grid > div:nth-child(12)  { transition-delay: 495ms; }
.equip-grid > div:nth-child(13)  { transition-delay: 540ms; }
.equip-grid > div:nth-child(14)  { transition-delay: 585ms; }
.equip-grid > div:nth-child(15)  { transition-delay: 630ms; }

.equip-grid > div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--heat); transform: scaleY(0); transform-origin: top;
  transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1);
}
.equip-grid > div:hover { background: var(--surface-2); }
.equip-grid > div:hover::before { transform: scaleY(1); }
.equip-grid > div:hover span { color: var(--volt); }
.equip-grid span { transition: color 220ms ease; }

/* 장비 수 카운터 */
.equip-count {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); margin-bottom: 22px;
}
.equip-count b { font-size: clamp(34px, 4vw, 54px); font-weight: 500; color: var(--heat-hi); letter-spacing: -0.03em; }
.equip-count span { font-size: 12.5px; letter-spacing: 0.18em; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .equip-grid > div { opacity: 1; transform: none; transition: none; }
}

/* ── 사업영역 상세 ────────────────────────────────
   발주처가 확인하는 순서 그대로 — 대상 설비 → 수행 범위 → 납품 산출물. */
.svc-row p { margin-bottom: 12px; }
.svc-row p:last-child { margin-bottom: 0; }
.svc-row p b {
  display: inline-block; min-width: 92px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--heat-hi); margin-right: 10px;
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-row li { font-size: 12.5px; }


/* ── 접근성 ────────────────────────────────────
   다크 배경에서는 기본 포커스 링이 묻힌다. 명시적으로 밝은 링을 준다.
   터치 타깃은 WCAG 2.2 기준(24px) 위로 여유 있게 44px 이상. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--heat-hi);
  outline-offset: 4px;
  border-radius: 2px;
}
.dot { min-height: 44px; display: flex; align-items: center; background: none; }
.dot::before {
  content: ""; display: block; width: 46px; height: 3px;
  background: rgba(208,214,224,0.22);
}
.dot i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 3px; width: 0; inset: auto; background: var(--heat); }
.dot[data-on] i { animation: fillW 6s linear forwards; }
@keyframes fillW { to { width: 46px; } }
.brand:focus-visible { outline-offset: 6px; }


/* ── 프로세스 5단계 — 빛이 흘러가는 연출 ─────────────
   특정 칸만 배경을 밝히면 얼룩처럼 보인다(실제 지적).
   대신 01→05 순서대로 상단 라인에 빛이 지나가게 해서 '흐름'을 보여준다. */
.flow > div { position: relative; overflow: hidden; }
.flow > div::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--heat-hi), transparent);
  transform: translateX(-100%);
}
[data-in="1"] .flow > div::before { animation: flowLine 4.4s ease-in-out infinite; }
.flow > div:nth-child(1)::before { animation-delay: 0s; }
.flow > div:nth-child(2)::before { animation-delay: 0.32s; }
.flow > div:nth-child(3)::before { animation-delay: 0.64s; }
.flow > div:nth-child(4)::before { animation-delay: 0.96s; }
.flow > div:nth-child(5)::before { animation-delay: 1.28s; }
@keyframes flowLine {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  38%  { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* 호버할 때만 칸이 살짝 밝아진다 — 고정 강조 대신 반응으로 */
.flow > div { transition: background 260ms ease; }
.flow > div:hover { background: var(--surface-2); }

/* DWSIM·AI 단계는 배경이 아니라 단계 번호 색으로만 구분한다 */
.flow .step.is-key { color: var(--heat-hi); }

@media (prefers-reduced-motion: reduce) {
  .flow > div::before { animation: none !important; opacity: 0; }
}


/* ── 히어로 헤드라인 타이핑 ────────────────────────
   메모 「제미나이 3.0 디자인+애니메이션」의 타이핑 모션 케이스를 가져왔다.
   한 글자씩 찍히고, 액센트 줄에는 빛이 한 번 훑고 지나간다. */
.tc { display: inline; }
.tc-accent { color: var(--heat); }
.type-cursor {
  display: inline-block; width: 3px; height: 0.86em;
  background: var(--heat-hi); margin-left: 6px;
  vertical-align: -0.06em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 타이핑이 끝난 뒤 액센트 줄 위로 빛이 스친다 */
.slide[data-on] h1 { --shine: 1; }
.slide[data-on] .tc-accent {
  background: linear-gradient(100deg, var(--heat) 0%, var(--heat) 40%, #EDEFFF 48%, #FFFFFF 52%, #EDEFFF 56%, var(--heat) 64%, var(--heat) 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 6s ease-in-out 2.2s infinite;
}
@keyframes shine {
  0%, 58% { background-position: 100% 0; }
  100%    { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .type-cursor { display: none !important; animation: none; }
  .slide[data-on] .tc-accent { animation: none; background: none; -webkit-text-fill-color: var(--heat); color: var(--heat); }
}

/* ── 사업영역 탭 ──────────────────────────────────
   세 서비스를 한 번에 펼치면 글자 벽이 된다(실제 지적).
   탭으로 하나씩 보여주고, 각 패널은 리드 + 3항목 규격표로만 구성한다. */
.svc-tabs { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-tab {
  flex: 1; display: flex; align-items: center; gap: 14px;
  padding: 26px 24px; min-height: 76px;
  background: none; border: none; border-right: 1px solid var(--line);
  color: var(--muted); font-family: var(--sans); font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; text-align: left; cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
  position: relative;
}
.svc-tab:last-child { border-right: none; }
.svc-tab i { font-family: var(--mono); font-size: 12.5px; font-style: normal; letter-spacing: 0.12em; color: var(--line); transition: color 220ms ease; }
.svc-tab:hover { color: var(--text); background: var(--surface); }
.svc-tab[aria-selected="true"] { color: var(--text); background: var(--surface); }
.svc-tab[aria-selected="true"] i { color: var(--heat-hi); }
.svc-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--heat);
}

.svc-panels { display: grid; }
.svc-panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 72px);
  padding: 52px 0 8px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
}
.svc-panel[data-on] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 480ms ease 140ms, transform 480ms ease 140ms;
}
.svc-lead h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.svc-lead h3 span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0.16em; margin-top: 10px; }
.svc-lead p { margin-top: 22px; font-size: 17px; line-height: 1.85; color: #B4BAC4; }

.svc-spec { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: start; }
.svc-spec > div { background: var(--surface); padding: 22px 24px; }
.svc-spec dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--heat-hi); margin-bottom: 10px; }
.svc-spec dd { font-size: 16px; line-height: 1.8; color: #C3C9D2; }

@media (max-width: 900px) {
  .svc-tabs { flex-direction: column; }
  .svc-tab { border-right: none; border-bottom: 1px solid var(--line); }
  .svc-panel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .svc-panel { transition: none; } }

/* ── 사업영역 좌측 근거 ────────────────────────────
   좌측이 비어 보이던 이유는 여백이 아니라 '근거가 없어서'였다.
   그 서비스의 현장 사진과 핵심 수치를 붙여 오른쪽 규격표와 균형을 맞춘다. */
.svc-evid { margin-top: 30px; display: grid; gap: 18px; }
.ev-img { position: relative; overflow: hidden; border: 1px solid var(--line); }
.ev-img img {
  display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;   /* 좌우 높이 균형 */
  filter: brightness(0.8) saturate(1.05);
  transform: scale(1.04);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), filter 400ms ease;
}
.svc-panel[data-on] .ev-img img { transform: scale(1); }
.ev-img:hover img { filter: brightness(0.98); transform: scale(1.02); }

.ev-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ev-num > div { background: var(--surface); padding: 18px 16px 20px; }
.ev-num span { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; }
.ev-num b { display: block; font-family: var(--mono); font-size: clamp(20px, 2vw, 26px); font-weight: 500; color: var(--heat-hi); letter-spacing: -0.02em; }
.ev-num b i { display: block; font-style: normal; font-size: 12px; color: var(--volt); margin-top: 5px; letter-spacing: 0.04em; }

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


/* 좌우 칸을 같은 높이로 늘려 아래가 비지 않게 한다 */
.svc-panel { align-items: stretch; }
.svc-panel .svc-spec { align-self: stretch; display: grid; grid-auto-rows: 1fr; }
.svc-panel .svc-lead { display: flex; flex-direction: column; }
.svc-panel .svc-evid { margin-top: auto; }

/* ── 고정 배경 밴드 (SDMI 방식) ────────────────────
   본문 중간에 한 장. 배경은 뷰포트에 고정되고 화면만 지나간다.
   background-attachment: fixed는 모바일에서 깨지므로 sticky 레이어로 구현한다. */
.fixband {
  position: relative; padding: 0;
  height: clamp(360px, 56vh, 560px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* 🚨 position:fixed 자식은 뷰포트 전체를 덮는다. 부모에 clip-path를 걸어
   밴드 영역 밖으로 새어나가지 않게 잘라야 한다. 안 그러면 히어로 영상·서비스 섹션이 통째로 가려진다. */
.fixband::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("/assets/image/pages/band-measure.jpg") center/cover no-repeat;
  filter: brightness(0.5) saturate(1.05);
}
.fixband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,1,2,0.6), rgba(1,1,2,0.2) 40%, rgba(1,1,2,0.75));
}
.fb-copy {
  position: relative; z-index: 2;
  height: 100%; display: flex; align-items: center;
  padding: 0 var(--gutter);
}
.fb-copy p {
  font-size: clamp(24px, 3.4vw, 46px); font-weight: 700; line-height: 1.35;
  letter-spacing: -0.03em; color: #DDE2EA;
  text-shadow: 0 2px 30px rgba(1,1,2,0.9);
}
.fb-copy b { color: #FFFFFF; font-weight: 800; }

/* 고정 배경이 뒤로 빠지려면 조상에 배경이 없어야 한다 */
.fixband { isolation: isolate; clip-path: inset(0); }
@media (max-width: 760px) {
  .fixband::before { position: absolute; }   /* 모바일은 fixed 대신 일반 배경 */
}

/* ── 아이콘 시스템 ────────────────────────────────────────────
   Iconify(material-symbols) SVG를 CSS mask로 얹는다. 원본이 currentColor라
   색은 부모에서 상속되고, 파일은 assets/icon/ 한 곳에만 둔다. */
.ico {
  display: block; width: 30px; height: 30px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ico-measure     { --ico: url("/assets/icon/measure.svg"); }
.ico-analyze     { --ico: url("/assets/icon/analyze.svg"); }
.ico-simulate    { --ico: url("/assets/icon/simulate.svg"); }
.ico-ai          { --ico: url("/assets/icon/ai-optimize.svg"); }
.ico-verify      { --ico: url("/assets/icon/verify.svg"); }
.ico-data        { --ico: url("/assets/icon/data-driven.svg"); }
.ico-simulation  { --ico: url("/assets/icon/simulation.svg"); }
.ico-optimize    { --ico: url("/assets/icon/optimize.svg"); }
.ico-roi         { --ico: url("/assets/icon/roi-trend.svg"); }

/* 5단계: 아이콘 → 단계코드 한 줄, 아이콘은 진행할수록 진해진다 */
.flow .step-head { display: flex; align-items: center; gap: 11px; }
.flow .step-head .ico { color: var(--heat); opacity: 0.75; transition: opacity 260ms ease, transform 260ms ease; }
.flow > div:hover .step-head .ico { opacity: 1; transform: translateY(-2px); }
.flow .step-head .ico.is-key { color: var(--heat-hi); opacity: 1; }

/* 4대 역량 카드: 아이콘을 라벨 위에 크게 */
.film-note .ico { width: 34px; height: 34px; color: var(--heat-hi); margin-bottom: 18px; }

/* 푸터 세 칸을 같은 기준선에서 시작시키고 폭을 고르게 준다 */
.foot-grid { align-items: start; }
footer .foot-grid > div { flex: 1 1 240px; max-width: 380px; }


/* ══ 홈 공지사항 ══════════════════════════════════════════
   게시판 최신 글을 메인에 얇게 건다. 카드가 아니라 목록이라
   서비스 섹션 앞에서 무게를 덜 잡는다. */
.notice-sec { padding: clamp(52px, 6vw, 84px) var(--gutter); border-top: 1px solid var(--line); }
.notice-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.notice-head h2 {
  font-size: clamp(22px, 2.1vw, 30px); font-weight: 700;
  letter-spacing: -0.03em; margin: 0; word-break: keep-all;
}
.notice-more {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.12em; color: var(--muted); text-decoration: none;
  transition: color 240ms ease;
}
.notice-more:hover { color: var(--fg); }
.notice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notice-list li { border-bottom: 1px solid var(--line); }
.notice-list a {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: 16px; padding: 15px 4px; text-decoration: none; color: var(--fg);
  transition: background 240ms ease, padding-left 240ms ease;
}
.notice-list a:hover { background: rgba(255,255,255,0.03); padding-left: 12px; }
.notice-list .cat {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--heat-hi); white-space: nowrap;
}
.notice-list .subj {
  font-size: 15.5px; line-height: 1.55; word-break: keep-all;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-list .date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .notice-list a { grid-template-columns: 52px 1fr; gap: 10px; row-gap: 4px; }
  .notice-list .date { grid-column: 2; font-size: 11.5px; }
  .notice-list .subj { white-space: normal; }
}


/* ══ 404 ══════════════════════════════════════════════ */
.nf-sec { padding: clamp(90px, 12vw, 160px) var(--gutter) clamp(70px, 9vw, 120px); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 38px); }
.nf-links a {
  display: inline-block; padding: 11px 18px; border: 1px solid var(--line);
  color: var(--fg); text-decoration: none; font-size: 14.5px;
  transition: border-color 240ms ease, background 240ms ease;
  word-break: keep-all;
}
.nf-links a:hover { border-color: var(--heat-hi); background: rgba(255,255,255,0.04); }
.nf-links a.is-key { border-color: var(--heat-hi); color: var(--heat-hi); }