/* 뼈대 조각 — 상단 내비 · 중간 CTA 띠 · 고정 «빠른 상담» · 맨 위로 · 푸터.
 *
 * ★여기는 **뼈대(자리·크기·구조)** 다. 색·유리·발광처럼 apple-core.css 가 뒤에서 덮는 값은
 *   개편 층 s-fx.css 가 다시 덮는다 — 같은 속성을 두 파일에 적지 않으려고 나눴다. */

/* ── 내비 ──
 * ★애플 제품 페이지의 «로컬 내비» 를 따른다. 높이 52px, 왼쪽에 제품 이름 하나,
 *   오른쪽에 12px 링크와 작은 알약 버튼. 내비가 얇아야 첫 화면 제목이 산다. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, #02060A 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: #FFFFFF; }
.brand__mark { display: grid; place-items: center; }
.brand__mark svg { width: 22px; height: 22px; }
.brand__text { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.brand__text strong { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }

.nav__links { display: flex; gap: var(--s-5); }
.nav__links a { position: relative; font-size: 12px; letter-spacing: -0.01em; transition: color 0.2s; }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

/* 읽은 만큼 차오르는 막대. 내비 맨 위 가장자리에 붙는다.
 * ★transform(scaleX)만 바꾼다 — 폭을 바꾸면 매 프레임 배치를 다시 계산한다. */
.nav__progress {
  position: absolute; inset: 0 0 auto; height: 2px; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.nav__progress span {
  display: block; height: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--fx-progress, 0));
  will-change: transform;
}
/* 스크롤 연동 애니메이션을 아는 브라우저는 스크립트 없이 CSS 만으로 채운다(site.js 는 이때 손을 뗀다). */
@supports (animation-timeline: scroll()) {
  .nav__progress span { animation: fx-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes fx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 햄버거 → X */
.nav__toggle {
  display: none; width: 40px; height: 40px; margin-right: -8px; background: none; cursor: pointer; border: 0;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center; border-radius: 10px;
}
.nav__toggle span { display: block; width: 18px; height: 1.5px; background: #FFFFFF; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 모바일 전체 화면 시트 ──
 * ★`position: fixed` 를 쓰지 않는다. 내비가 backdrop-filter 를 쥐고 있어서 그 안의 fixed 는
 *   화면이 아니라 **내비 상자(52px)** 에 붙는다. 그래서 내비 바로 아래에 absolute 로 걸고
 *   높이를 화면 높이에서 내비만큼 뺀다.
 * ★`hidden` 속성은 저자 스타일시트의 display 에 진다. 열렸을 때만, 그리고 좁은 화면에서만 켠다. */
.nav__mobile {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 900px) { .nav__mobile:not([hidden]) { display: block; animation: fade .25s var(--ease) both; } }
.nav__sheet {
  display: flex; flex-direction: column; min-height: 100%;
  width: min(100% - 32px, 560px); margin-inline: auto; padding: 18px 0 max(28px, env(safe-area-inset-bottom));
}
.nav__sheet-list li { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
.nav__sheet-list a {
  display: flex; align-items: baseline; gap: 16px; padding: 15px 2px;
  font-size: 24px; font-weight: 600; letter-spacing: -.03em;
}
.nav__sheet-no { flex: none; width: 24px; font: 500 12px/1 var(--font-num); letter-spacing: .04em; }
.nav__mobile-cta { width: 100%; min-height: 52px !important; margin-top: 28px; font-size: 17px !important; justify-content: center; }
.nav__sheet-foot { margin-top: auto; padding-top: 28px; font-size: 13px; text-align: center; }
/* 스크립트가 없으면 시트를 열 방법이 없다 — 누를 수 없는 버튼은 «고장» 으로 읽히므로 숨긴다.
 * ★그때 남는 지름길은 푸터의 링크 열이다. 다만 푸터 링크(content/site.py 의 FOOTER_LINKS)에는
 *   «도입 사례»·«왜 지금인가» 가 **없다** — 두 장은 스크롤로만 닿는다(내용이 숨지는 않는다). */
@media (scripting: none) { .nav__toggle { display: none !important; } }

/* ── 중간 CTA 띠 ──
 * ★섹션이 아니라 «띠» 다. 크게 만들면 읽던 흐름이 끊긴다. 한 줄 글 + 버튼 하나. */
.ctaband { background: var(--bg-deep); border-block: 1px solid var(--line-soft); }
.ctaband__inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--s-4) var(--s-7); padding-block: var(--s-7); text-align: center;
}
.ctaband__text { font-size: 17px; color: var(--text-muted); }
.ctaband__text strong {
  display: block; margin-bottom: 4px; font-size: clamp(21px, 2.2vw, 28px);
  color: var(--text-strong); letter-spacing: -0.025em;
}

/* ── 고정 «빠른 상담» ── */
.qdock {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0s;
}
/* ★문의 폼이 화면에 들어오면 물러난다(`is-away`). 폼 위에 «문의하기» 가 겹쳐 떠 있으면
   제출 버튼을 가려 버린다 — 문의를 늘리려고 단 것이 문의를 막는다.
 * ★첫 화면에서도 나오지 않는다. 첫 화면에는 내비와 히어로에 이미 상담 버튼이 있어서, 떠 있는
 *   버튼까지 셋이 한꺼번에 «상담» 을 외친다. 맨 위로 버튼과 같이 한 화면 내려오면 site.js 가
 *   `is-shown` 을 붙인다. 스크립트가 없으면 늘 떠 있다(그때는 이 버튼이 가장 가까운 문의 길이다).
 * ★물러난 동안은 visibility 까지 끈다 — 투명한 채 Tab 초점을 받으면 보이지 않는 곳에 초점이 간다.
 *   나타날 때는 바로 켜고(0s), 사라질 때는 흐려진 뒤에 끈다(.25s 지연). */
.qdock.is-away {
  opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}
@media (scripting: enabled) {
  .qdock:not(.is-shown) {
    opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  }
}

/* ── 맨 위로 ── 상담 버튼 바로 위에 작게. 상담 버튼보다 눈에 띄면 안 된다. */
.totop {
  position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 52px); z-index: 40;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s, border-color .2s;
}
/* 한 화면 이상 내려왔을 때만 보인다. 스크립트가 있으면 site.js 가 `is-shown` 을 붙이고,
 * 스크롤 타임라인을 아는 브라우저는 스크립트 없이도 CSS 로 같은 일을 한다(첫 화면에서 떠 있지 않게).
 * 둘 다 없으면 늘 보인다(footer.html 주석). */
@media (scripting: enabled) {
  .totop:not(.is-shown) { opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }
}
@supports (animation-timeline: scroll()) {
  .totop { animation: fx-totop linear both; animation-timeline: scroll(root block); animation-range: 60vh 100vh; }
}
@keyframes fx-totop {
  from { opacity: 0; transform: translateY(10px) scale(.9); visibility: hidden; }
  to { opacity: 1; transform: none; visibility: visible; }
}

/* ── 푸터 ── */
.footer { position: relative; padding-top: clamp(64px, 8vw, 104px); font-size: 13px; overflow: clip; }
.ft__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.ft__logo { display: inline-flex; align-items: center; gap: 12px; }
.ft__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; }
.ft__name { font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
/* ★부제(site.py BRAND.product)가 한글이 됐다 — 영문 대문자용 고정폭·넓은 자간을 걷었다. */
.ft__sub { font: 600 12px/1 var(--font); letter-spacing: .02em; align-self: center; margin-top: 4px; }
.ft__tagline { margin-top: 16px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.02em; }
.ft__reach { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ft__contact { display: flex; gap: 10px; font-size: 14px; }

.ft__products {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
}
.ft__product {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 20px 20px 18px; border-radius: 18px;
  transition: border-color .25s, background .25s, transform .35s var(--ease);
}
.ft__product strong { font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.ft__kicker { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.ft__platform { margin-top: auto; padding-top: 10px; font-size: 12px; }

.ft__grid {
  display: grid; grid-template-columns: 1.1fr 2fr; gap: 40px 64px;
  margin-top: clamp(40px, 5vw, 64px); padding-block: 36px 40px;
}
.ft__nav { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.ft__col h3 { font-size: 12px; font-weight: 600; margin-bottom: 14px; letter-spacing: .02em; }
.ft__col li { margin-bottom: 9px; }
.ft__col a { font-size: 13px; }
/* 링크가 가장 많은 «기술» 열은 두 단으로 나눠 높이를 맞춘다. */
.ft__col:last-child ul { columns: 2; column-gap: 24px; }
.ft__col:last-child li { break-inside: avoid; }

.footer__co { display: flex; align-items: baseline; gap: 8px; }
.footer__co-role { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__co strong { font-size: 15px; }
.footer__meta { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; }
.footer__meta li { display: flex; gap: 10px; }
.footer__meta span { min-width: 30px; }

.footer__bottom {
  padding-block: 22px 28px;
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
/* ★페이지 맨 끝에서는 더 내릴 수 없으므로, 떠 있는 버튼 기둥(맨 위로 + 스크립트가 없을 때의
 *   «도입 상담»)이 덮는 높이만큼 아래를 비워 둔다. 안 그러면 고지문 «…계약 조건은…» 의 끝이
 *   버튼 밑에 깔린 채 영영 안 보인다(390px 에서 실제로 가려졌다).
 *   높이 = 버튼 기둥의 바닥 간격 + 맨 위로 자리(52px/48px) + 맨 위로 38px + 여유 16px.
 *   넓은 화면(>900px)은 글 줄이 기둥 왼쪽에서 끝나 비울 필요가 없다. */
@media (max-width: 900px) { .footer__bottom { padding-bottom: calc(var(--s-5) + 52px + 38px + var(--s-4)); } }
.footer__note { font-size: 12px; max-width: 640px; }
.footer__copy { font-size: 12px; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .ft__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav__inner { gap: var(--s-3); }
  .qdock { right: var(--s-3); bottom: var(--s-3); }
  .totop { right: var(--s-3); bottom: calc(var(--s-3) + 48px); }
  .footer__bottom { padding-bottom: calc(var(--s-3) + 48px + 38px + var(--s-4)); }
  .ctaband__inner { text-align: left; justify-content: flex-start; }
  .ft__top { align-items: flex-start; }
  /* 좁은 화면에서는 «도입 | 기술» 두 열로 나란히 — 한 줄에 하나씩 쌓으면 푸터가 화면 세 장이 된다. */
  .ft__nav { grid-template-columns: 1fr 1.25fr; gap: 24px; }
  .ft__col:last-child ul { columns: 1; }
  .ft__product { padding: 16px; }
  .ft__product strong { font-size: 15px; }
}
@media print { .nav, .qdock, .totop, .ctaband { display: none; } }