/* s-fx.css — 개편 층: 페이지 전체의 인상.
 *
 * 맡는 것: 내비(유리·진행 막대·스크롤스파이·모바일 시트) · 모든 장의 머리(.shead) ·
 *          장 요소 자체(#id)의 바탕 · 떠 있는 «도입 상담» · 맨 위로 · 푸터.
 * ★장 안쪽 요소는 건드리지 않는다. 장별 담당이 동시에 고치고 있다.
 * ★apple-core.css 가 chrome.css 뒤에서 내비·푸터 색을 덮으므로, 색·유리·발광은 여기서 다시 덮는다.
 * ★상태색(안정·불안정·단절·경고)은 여기서 한 번도 쓰지 않는다 — 장식에 쓰면 제품 화면의 뜻이 흐려진다. */

:root {
  --fx-grad: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd);
  /* 필름 결. ★그림 파일이 아니라 SVG 잡음 필터다 — 요청이 하나 늘지 않고, 타일 한 장을 한 번만 그린다. */
  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fx-line: rgba(255, 255, 255, .04);
}

/* ══ 1. 내비 ══════════════════════════════════════════════════════════ */
.nav {
  background: rgba(10, 10, 12, .58);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav.is-stuck {
  background: rgba(10, 10, 12, .74);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
/* 시트가 열리면 내비 띠도 불투명하게 — 뒤 페이지가 비치면 시트와 한 덩어리로 안 읽힌다. */
.nav.is-open { background: #000; border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.nav__progress span { background: var(--fx-grad); box-shadow: 0 0 12px rgba(125, 122, 255, .55); }

/* 링크를 내비 높이만큼 세워 두면 «지금 보는 장» 표시줄을 내비 아래 가장자리에 정확히 붙일 수 있다. */
.nav__links { align-self: stretch; }
.nav__links a { display: flex; align-items: center; color: #b4b4b9; }
.nav__links a:hover { color: #f5f5f7; }
.nav__links .nav__link--featured { color: #d2d2d7; }
.nav__links a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--fx-grad); transform: scaleX(0); opacity: 0;
  transition: transform .45s var(--ease), opacity .3s;
}
.nav__links a[aria-current] { color: #fff; }
.nav__links a[aria-current]::before { transform: scaleX(1); opacity: 1; }
/* «NEW» — 작은 그라데이션 알약. 내비가 얇아진 만큼 작게.
 * ★브랜드 그라데이션(--fx-grad)을 그대로 깔면 흰 글자가 2.9~3.4:1 로 흐려진다(9px 글자에는 치명적).
 *   같은 세 색을 한 단계 눌러 흰 글자 대비를 5.3:1 이상으로 맞춘다(#1667c4 5.6 · #5552c7 6.1 · #b8388a 5.3). */
.nav__links .nav__link--featured::after,
.nav__mobile .nav__link--featured::after {
  content: "NEW"; display: inline-block; margin-left: 6px; padding: 2px 5px 1px; border-radius: 4px;
  background: linear-gradient(90deg, #1667c4, #5552c7 52%, #b8388a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff; font: 700 9px/1.1 var(--font-num); letter-spacing: .06em;
  vertical-align: 1px;
}
.nav__cta { box-shadow: 0 0 0 0 rgba(41, 151, 255, 0); transition: box-shadow .3s, background .2s; }
.nav__cta[aria-current] { box-shadow: 0 0 0 3px rgba(41, 151, 255, .28); }
.nav__toggle:focus-visible { outline-offset: 0; }
/* ★apple-core 가 좁은 화면에서 햄버거를 grid 로 바꾼다. grid 는 세 줄을 버튼 높이만큼 벌려 놓아
 *   «X» 로 접힐 때 두 줄이 한가운데서 만나지 못하고 «>» 가 된다. flex 로 되돌린다. */
@media (max-width: 900px) { .nav__toggle { display: flex; } }

/* 모바일 전체 화면 시트 */
@media (max-width: 900px) {
  .nav__mobile {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background:
      radial-gradient(520px 420px at 100% 0, rgba(41, 151, 255, .16), transparent 70%),
      radial-gradient(480px 420px at 0 100%, rgba(191, 90, 242, .13), transparent 70%),
      #000;
  }
}
.nav__sheet-list li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.nav__sheet-list a { color: #f5f5f7; transition: color .2s; }
.nav__sheet-list a:hover { color: #fff; }
.nav__sheet-no { color: #86868b; }
.nav__sheet-list a[aria-current] .nav__sheet-no { color: #2997ff; }
.nav__sheet-list a[aria-current] .nav__sheet-label {
  background: var(--fx-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav__sheet-list .nav__link--featured::after { align-self: center; }
.nav__mobile-cta { box-shadow: 0 14px 40px rgba(0, 113, 227, .35); }
.nav__sheet-foot { color: #86868b; }
.nav__sheet-foot a { color: #2997ff; }
/* 시트가 열린 동안 뒤 페이지가 따라 스크롤되지 않게 (site.js 가 붙인다). */
html.fx-lock { overflow: hidden; }

/* ══ 2. 장 머리 (.shead) ══════════════════════════════════════════════════
 * ★모든 장이 쓰는 조각이라 통일감의 지렛대다. 눈썹을 점 달린 알약으로, 제목·리드 간격을 하나로.
 * ★정렬(가운데/왼쪽)은 건드리지 않는다 — 장마다 이유가 있다(base.css 의 shead 주석).
 *   알약이 inline-flex 라 부모의 text-align 을 그대로 따른다. */
.shead .eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px; padding: 7px 15px 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  color: #cfe3ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 26px rgba(0, 0, 0, .3);
}
.shead .eyebrow::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #2997ff, #bf5af2);
  box-shadow: 0 0 10px rgba(41, 151, 255, .9);
}
/* 점에서 번지는 고리 하나. ★transform·opacity 만 움직인다(합성 단계에서 끝난다). */
.shead .eyebrow::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; border: 1px solid rgba(41, 151, 255, .8);
  animation: fx-ping 3.2s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes fx-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
.shead h2 { margin: 0; }
.shead__lead, .shead > .lead { margin-top: 22px; color: #a1a1a6; }
.shead__lead strong { color: #f5f5f7; }

/* ══ 3. 장별 분위기 바탕 ═════════════════════════════════════════════════
 * ★장 요소 자체의 background 만 맡는다. 가상 요소(::before/::after)는 장 담당이 쓸 수 있게 비워 둔다.
 * ★선택자는 `#id` 하나다. 옛 층(apple-sections.css 의 `#id`)은 먼저 읽히므로 순서로 이긴다.
 *   `section#id` 로 올리지 않는다 — 장 담당 파일(s-intro·system·s-trust …)이 뒤에 읽히면서 제 장에
 *   사진 흐림·청사진 같은 바탕을 **일부러** `#id` 로 적으면 그쪽이 이겨야 한다(지침 2-3).
 * ★연속된 두 장이 같은 인상이면 안 된다 — 발광의 위치·색과 결(격자·점·빗금·고리·잡음)을 번갈아 쓴다.
 * ★발광 크기는 px 로 적는다. 장 높이가 1,000~7,000px 로 제각각이라 % 로 적으면 긴 장에서 번진다.
 * ★사진이 주인공인 장(사례·현장·번호판)은 발광 하나만 — 사진과 다투지 않게.
 * ★글 대비: 발광은 모두 알파 .2 이하. 제일 밝은 자리도 바탕이 #1a2a40 를 넘지 않는다.
 *
 * ★★장 경계에서 빛이 칼같이 잘리면 안 된다. 발광이 장 가장자리에 걸려 있으면 다음 장의 바탕에서
 *   일직선으로 끊겨 «그리다 만 화면» 으로 읽힌다(실제로 났던 일 — 적용 산업의 노을이 도입 장
 *   검은 띠에 잘렸다). 그래서 두 가지를 지킨다.
 *   ① 발광 중심은 가장자리에서 180px 이상 안쪽에 둔다.
 *   ② 맨 위층 «가장자리 지우개»(--fx-edge)가 위·아래 160px 을 그 장의 바탕색으로 되돌린다.
 *      경계에서 만나는 것은 두 장의 **평평한 바탕색**(#000 ↔ #0b0b0c)뿐 — 애플 제품 페이지의 이음매와 같다.
 *
 * 층 순서(위 → 아래): 가장자리 지우개 → 발광 → 결을 가장자리에서 지우는 비네트 → 결 → 바탕색. */
#highlights, #cases, #why, #allbaro, #products, #field, #system, #how,
#lpr, #trust, #edge, #industries, #pricing, #faq, #contact {
  --fx-edge: linear-gradient(var(--fx-base), transparent 160px, transparent calc(100% - 160px), var(--fx-base));
}

/* 핵심부터 — 위에서 내리꽂는 파란 조명. 첫 장이니 가장 «무대» 같게. */
#highlights {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    radial-gradient(900px 560px at 50% 200px, rgba(41, 151, 255, .2), transparent 70%),
    radial-gradient(600px 420px at 92% calc(100% - 220px), rgba(125, 122, 255, .09), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 도입 사례 — 사진 장. 왼쪽 위 보라 기운 하나. */
#cases {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(760px 520px at 4% 220px, rgba(125, 122, 255, .1), transparent 70%),
    var(--fx-base);
}
/* 왜 지금인가 — 규제의 긴장감: 오른쪽 위 분홍 + 빗금. */
#why {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(760px 560px at 96% 220px, rgba(240, 100, 189, .13), transparent 70%),
    radial-gradient(640px 480px at 4% calc(100% - 220px), rgba(41, 151, 255, .08), transparent 70%),
    radial-gradient(ellipse at 60% 30%, transparent 25%, var(--fx-base) 72%),
    repeating-linear-gradient(135deg, var(--fx-line) 0 1px, transparent 1px 28px),
    var(--fx-base);
}
/* 올바로 연계 — 문서·연결망: 점 격자 + 왼쪽 파랑. */
#allbaro {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    radial-gradient(760px 600px at 12% 30%, rgba(41, 151, 255, .14), transparent 70%),
    radial-gradient(ellipse at 40% 40%, transparent 20%, var(--fx-base) 70%),
    radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.6px) 0 0 / 24px 24px,
    var(--fx-base);
}
/* 제품 — 무대 위 두 갈래 오로라(파랑·보라). 장이 길어 윗부분에만 건다. */
#products {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(900px 640px at 18% 220px, rgba(41, 151, 255, .18), transparent 70%),
    radial-gradient(900px 640px at 84% 220px, rgba(191, 90, 242, .14), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 현장과 사무실 — 사진 장. 결만 남기고 아래쪽 푸른 기운 하나. */
#field {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(1100px 520px at 50% calc(100% - 240px), rgba(41, 151, 255, .09), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 통합 시스템 구조 — 청사진 격자 + 가운데 푸른 발광. */
#system {
  --fx-base: #050507;
  background:
    var(--fx-edge),
    radial-gradient(900px 640px at 50% 42%, rgba(41, 151, 255, .15), transparent 70%),
    radial-gradient(620px 520px at 94% 260px, rgba(125, 122, 255, .1), transparent 70%),
    radial-gradient(ellipse at 50% 45%, transparent 30%, var(--fx-base) 78%),
    linear-gradient(rgba(41, 151, 255, .07) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(41, 151, 255, .07) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--fx-base);
}
/* 작동 방식 — 흐름: 가로 주사선 + 오른쪽 보라. */
#how {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    radial-gradient(760px 560px at 92% 280px, rgba(191, 90, 242, .12), transparent 70%),
    radial-gradient(ellipse at 40% 50%, transparent 30%, var(--fx-base) 76%),
    repeating-linear-gradient(0deg, var(--fx-line) 0 1px, transparent 1px 44px),
    var(--fx-base);
}
/* 번호판 인식 — 사진 장. 왼쪽 위 파랑 하나. */
#lpr {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    radial-gradient(860px 560px at 4% 220px, rgba(41, 151, 255, .11), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 신뢰 — 도장처럼 위에서 번지는 동심원 + 보라. */
#trust {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(760px 520px at 50% 200px, rgba(125, 122, 255, .16), transparent 70%),
    radial-gradient(ellipse at 50% 200px, transparent 20%, var(--fx-base) 62%),
    repeating-radial-gradient(circle at 50% 200px, var(--fx-line) 0 1px, transparent 1.5px 64px),
    var(--fx-base);
}
/* 차별점 — 비스듬히 지나가는 빛 한 줄기 + 왼쪽 아래 분홍. */
#edge {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    linear-gradient(115deg, transparent 32%, rgba(41, 151, 255, .065) 50%, transparent 68%),
    radial-gradient(760px 520px at 4% calc(100% - 220px), rgba(240, 100, 189, .09), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 적용 산업 — 지평선 노을(보라·분홍) + 위쪽에 옅은 점 격자.
 * ★지평선을 장 바닥이 아니라 바닥에서 220px 위에 둔다. 그 아래는 지우개가 어둡게 눌러
 *   «땅» 이 되고, 다음 장(도입)과는 평평한 바탕으로 만난다. */
#industries {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(1300px 420px at 50% calc(100% - 220px), rgba(125, 122, 255, .16), transparent 70%),
    radial-gradient(760px 300px at 50% calc(100% - 220px), rgba(240, 100, 189, .1), transparent 70%),
    radial-gradient(ellipse at 50% 0, transparent 10%, var(--fx-base) 60%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 28px 28px,
    var(--fx-base);
}
/* 도입(가격) — 값 뒤에 선 조명. 가운데 파랑 + 오른쪽 보라 + 고운 격자. */
#pricing {
  --fx-base: #0b0b0c;
  background:
    var(--fx-edge),
    radial-gradient(960px 640px at 42% 58%, rgba(41, 151, 255, .13), transparent 70%),
    radial-gradient(640px 460px at 82% 36%, rgba(191, 90, 242, .11), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, var(--fx-base) 75%),
    linear-gradient(var(--fx-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--fx-line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--fx-base);
}
/* 자주 묻는 질문 — 읽는 장. 가장 조용하게. */
#faq {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(760px 520px at 4% 220px, rgba(41, 151, 255, .08), transparent 70%),
    var(--fx-noise), var(--fx-base);
}
/* 문의 — 마지막 장. 아래에서 떠오르는 오로라 + 위쪽 옅은 격자.
 * ★오로라 중심을 바닥에서 200px 위로 — 바닥에 걸면 푸터의 경계선에서 잘린다. */
#contact {
  --fx-base: #000;
  background:
    var(--fx-edge),
    radial-gradient(1200px 560px at 50% calc(100% - 200px), rgba(41, 151, 255, .2), transparent 70%),
    radial-gradient(760px 460px at 88% calc(100% - 240px), rgba(240, 100, 189, .12), transparent 70%),
    radial-gradient(ellipse at 50% 0, transparent 5%, var(--fx-base) 55%),
    linear-gradient(var(--fx-line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--fx-line) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--fx-base);
}

/* ══ 4. 떠 있는 버튼 — «도입 상담» · 맨 위로 ═════════════════════════════ */
.qdock .btn--primary {
  min-height: 46px; padding: 0 20px 0 16px; gap: 8px; font-size: 15px; font-weight: 600;
  color: #fff; border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, #2997ff, #0071e3 55%, #5e5ce6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px rgba(0, 113, 227, .42), 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.qdock .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 40px rgba(41, 151, 255, .55), 0 2px 8px rgba(0, 0, 0, .4);
}
/* 말풍선 아이콘 — 마크업을 늘리지 않으려고 가면(mask)으로 그린다. */
.qdock .btn--primary::before {
  content: ""; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qdock .btn--ghost {
  color: #f5f5f7; border-color: rgba(255, 255, 255, .16); background: rgba(28, 28, 30, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
/* ★좁은 화면에서는 옛 btn--sm 크기(36px)로 되돌린다. 떠 있는 버튼은 읽는 내내 본문 한 귀퉁이를
 *   덮고 있다 — 390px 에서 42px 알약 + 맨 위로 38px 은 카드 글을 가렸다. 크기로 이기지 않는다. */
@media (max-width: 640px) {
  .qdock .btn--primary {
    min-height: 36px; padding: 0 13px 0 11px; gap: 6px; font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 22px rgba(0, 113, 227, .38), 0 2px 6px rgba(0, 0, 0, .4);
  }
  .qdock .btn--primary::before { width: 15px; height: 15px; }
}
.totop {
  color: #f5f5f7; background: rgba(28, 28, 30, .66); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.totop:hover { border-color: rgba(41, 151, 255, .6); background: rgba(41, 151, 255, .18); }

/* ══ 5. 푸터 ═══════════════════════════════════════════════════════════
 * ★작은 글(10~13px)의 가장 어두운 색은 #86868b 다. 잡음·발광이 깔린 실제 바탕(#0a0a0b~#16111a)에서
 *   #6e6e73 은 3.7~3.9:1 로 AA(4.5:1)에 못 미쳤다 — 그 안에 «추정치·실사 후 확정» 고지문이 있다.
 *   고지문은 한 단계 더 밝게(#a1a1a6) 둔다. 읽혀야 효력이 있는 문장이다. */
.footer {
  color: #86868b; border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(900px 420px at 12% 160px, rgba(41, 151, 255, .1), transparent 70%),
    radial-gradient(700px 380px at 95% 100%, rgba(191, 90, 242, .07), transparent 70%),
    var(--fx-noise), #050506;
}
.ft__logo { color: #f5f5f7; }
.ft__mark {
  color: #fff;
  background: linear-gradient(135deg, rgba(41, 151, 255, .9), rgba(125, 122, 255, .85) 55%, rgba(240, 100, 189, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 28px rgba(41, 151, 255, .3);
}
.ft__sub { color: #86868b; }
.ft__tagline { color: #d2d2d7; }
.ft__contact a { color: #2997ff; }
.ft__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ft__products li:nth-child(1) { --c: #2997ff; }
.ft__products li:nth-child(2) { --c: #7d7aff; }
.ft__products li:nth-child(3) { --c: #bf5af2; }
.ft__products li:nth-child(4) { --c: #f064bd; }
.ft__product {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08); overflow: hidden;
}
/* 위 가장자리의 색띠 — 네 제품을 색으로도 가른다. */
.ft__product::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--c, #2997ff), transparent 85%); opacity: .9;
}
.ft__product:hover {
  border-color: color-mix(in srgb, var(--c, #2997ff) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, #2997ff) 12%, transparent), rgba(255, 255, 255, .02));
  transform: translateY(-2px);
}
.ft__product strong { color: #f5f5f7; }
.ft__kicker { color: var(--c, #2997ff); }
.ft__platform { color: #86868b; }

.ft__grid { border-top: 1px solid rgba(255, 255, 255, .08); }
.ft__col h3 { color: #f5f5f7; }
.ft__col a { color: #86868b; transition: color .2s; }
.ft__col a:hover { color: #f5f5f7; }
.footer__co-role { color: #86868b; }
.footer__co strong { color: #f5f5f7; }
.footer__meta { color: #a1a1a6; }
.footer__meta span { color: #86868b; }
.footer__meta a { color: #2997ff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer__note { color: #a1a1a6; }
.footer__copy { color: #86868b; }

/* ══ 6. 움직임 줄이기 ══════════════════════════════════════════════════
 * ★apple-core 의 전역 규칙은 길이만 .01ms 로 줄인다. 무한 반복 애니메이션은 그러면 매 프레임
 *   깜빡이므로 **아예 끈다.** */
@media (prefers-reduced-motion: reduce) {
  .shead .eyebrow::after { animation: none; opacity: 0; }
  .nav__sheet-list li { animation: none; }
  .qdock .btn--primary:hover, .ft__product:hover { transform: none; }
}