/* ==========================================================================
   components.css — 헤더, 모바일 메뉴, 언어 토글, 푸터
   모바일 우선. 1024px 이상에서 인라인 메뉴로 전환
   ========================================================================== */

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* 스크롤 후·메뉴 열림: 불투명 Orbit Navy (블러·반투명 없음) */
.site-header.is-scrolled,
.site-header.is-menu-open {
  background-color: var(--orbit-navy);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
}

.site-logo {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
}

.site-logo img {
  width: auto;
  height: 39px; /* 2026-09-29: 흰색 버전 SVG 라 filter 로 색을 바꾸지 않는다 */
  opacity: 0.7; /* 2026-09-29 사용자 요청: 너무 선명해 한 단계 물린다 */
}

/* ---------- 메뉴: 모바일 패널 ---------- */
.site-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  left: 0;
  max-height: calc(100svh - var(--header-h)); /* 하위 메뉴를 펼쳐도 낮은 화면에서 스크롤로 닿게 */
  overflow-y: auto;
  padding: var(--sp-2) var(--gutter) var(--sp-6);
  background-color: var(--orbit-navy);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.site-header.is-menu-open .site-nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav a {
  display: block;
  padding-block: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--paper);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--electric-blue-dark);
}

/* ---------- 하위 메뉴 (About): 모바일은 펼침 목록 ---------- */
.site-nav__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding-block: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--paper);
  text-align: left;
}

/* 펼침 방향 표시: 테두리로 그린 꺾쇠 */
.site-nav__trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.site-nav__trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.site-nav__trigger:hover,
.site-nav__trigger.is-current {
  color: var(--electric-blue-dark);
}

.site-nav__sub {
  display: none;
  padding-left: var(--sp-5);
}

.site-nav__trigger[aria-expanded="true"] + .site-nav__sub {
  display: block;
}

.site-nav__sub a {
  padding-block: var(--sp-2);
  font-size: var(--fs-base);
}

/* ---------- 언어 토글 ---------- */
/* 가로가 짧은 직사각형 + 살짝 둥근 모서리의 테두리 버튼 (2026-09-15 사용자 요청) */
.lang-toggle {
  min-width: 40px;
  height: 30px;
  margin-left: auto;
  padding-inline: var(--sp-2);
  border: 1px solid rgba(244, 246, 248, 0.45);
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.08em; /* 2026-09-29: 두 글자 버튼이라 약간만 남긴다 (mono 캡스용 0.20em 은 과했다) */
  color: var(--paper);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  border-color: var(--electric-blue-dark);
  color: var(--electric-blue-dark);
}

/* ---------- 모바일 메뉴 버튼 ---------- */
.nav-toggle {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--sp-3) * -1);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--paper);
  transition: transform 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ---------- 헤더: 데스크톱 (2026-09-28 브랜드 v1.0 으로 다시 짰다) ----------
   종전에는 Home Hero 격자에 맞춘 칸 묶음이었으나, 새 시안에 격자가 없어 통째로 폐기했다.
   지금은 화면 폭을 쓰는 한 줄 바다.
   - Hero 위에서는 배경이 투명해 그라데이션이 그대로 비친다
   - 헤더 높이만큼 내리는 동안 Orbit Navy 바가 서서히 진해진다
     (시간이 아니라 스크롤 위치에 묶여 있어 멈추면 중간 상태로 멈추고, 올리면 되돌아간다)
   - 내비는 Saira 500 · 15px, 강조는 Electric Blue Dark */
@property --header-bar-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@media (min-width: 1024px) {
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background-color: rgb(10 18 34 / var(--header-bar-alpha));
    border-bottom: 1px solid rgb(255 255 255 / calc(0.12 * var(--header-bar-alpha)));
  }

  /* 스크롤 연동: 헤더 높이만큼 내리는 동안 바가 진해진다.
     미지원 브라우저는 아래 .is-scrolled 로 0.35초 전환한다 */
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-bar linear both;
      animation-timeline: scroll();
      animation-range: 0 var(--header-h);
    }
  }

  @keyframes header-bar {
    from { --header-bar-alpha: 0; }
    to   { --header-bar-alpha: 1; }
  }

  .site-header.is-scrolled {
    --header-bar-alpha: 1;
    transition: --header-bar-alpha 0.35s ease;
  }

  /* 2026-09-28 사용자 요청: 로고를 화면 왼쪽 끝까지 붙이고 메뉴를 그 옆에 왼쪽 정렬한다.
     container 의 가운데 정렬·최대 폭을 풀어 헤더만 화면 폭을 그대로 쓴다.
     언어 토글만 오른쪽 끝에 남긴다 */
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-6);
    max-width: none;
    height: var(--header-h);
    padding-inline: var(--gutter);
  }

  /* 모바일 패널 규칙(fixed·숨김·전환)을 전부 되돌려 한 줄 메뉴로 만든다.
     2026-09-28 사용자 요청: 로고는 화면 왼쪽 끝, 메뉴는 오른쪽 끝으로 민다 */
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: var(--sp-6);
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav > ul {
    display: flex;
    align-items: center;
    gap: var(--sp-7); /* 2026-09-28 사용자 요청으로 32px → 48px */
    margin: 0;
  }

  .site-nav a,
  .site-nav__trigger {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-sans);
    /* 2026-09-28 사용자 요청: 아주 살짝 키우고(15 → 16px) 살짝 투명하게 */
    font-size: 1rem;
    font-weight: var(--fw-medium);
    font-stretch: var(--wd-body);
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .site-nav a:hover,
  .site-nav__trigger:hover {
    color: var(--electric-blue-dark); /* 올리면 또렷해진다 */
  }

  /* 현재 페이지 */
  .site-nav a[aria-current="page"] {
    color: var(--electric-blue-dark);
  }

  /* About 하위 메뉴: 데스크톱은 아래로 열리는 드롭다운 */
  .site-nav__group {
    position: relative;
  }

  .site-nav__trigger {
    width: auto;
    gap: var(--sp-2);
    font-size: 1rem;
  }

  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    min-width: max-content;
    padding: var(--sp-2) 0;
    background-color: var(--orbit-navy);
    border: 1px solid rgb(255 255 255 / 0.12);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .site-nav__group:hover .site-nav__sub,
  .site-nav__group:focus-within .site-nav__sub,
  .site-nav__trigger[aria-expanded="true"] + .site-nav__sub {
    opacity: 1;
    visibility: visible;
  }

  .site-nav__sub a {
    padding: var(--sp-2) var(--sp-5);
    white-space: nowrap;
  }

  /* 언어 토글: 데스크톱에서도 같은 테두리 버튼 모양을 쓰고, 메뉴 오른쪽에 이어 붙는다 */
  .lang-toggle {
    margin-left: 0;
  }

  .nav-toggle {
    display: none;
  }
}

/* ---------- 푸터: 로고·회사명 | 가로 메뉴, 저작권 ---------- */
.site-footer {
  padding-block: var(--sp-7) var(--sp-6);
  background-color: var(--orbit-navy);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-5);
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

.site-footer__logo {
  width: auto;
  height: 24px; /* 2026-09-29: 흰색 버전 SVG 라 filter 로 색을 바꾸지 않는다 */
  opacity: 0.9;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--electric-blue-dark);
}

.footer-copyright {
  font-size: var(--fs-caption);
  /* 2026-09-29: mono 를 걷으면서 캡스용 자간(0.20em)도 뺐다 — Saira 에서는 늘어져 보인다 */
  color: var(--text-subtle);
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-7);
  }

  .footer-nav {
    justify-self: end;
  }

  .footer-copyright {
    grid-column: 1 / -1;
  }
}


/* ---------- 텍스트 링크 (→) ----------
   2026-09-28 사용자 요청: 파란 밑줄 링크가 본문보다 눈에 띄어 흐린 회색으로 낮췄다.
   마우스를 올렸을 때만 또렷해지고 밑줄이 생긴다 */
.text-link {
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: rgba(244, 245, 247, 0.5);
  text-decoration: none;
  text-underline-offset: 0.35em;
  transition: color 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
  color: rgba(244, 245, 247, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* 밝은 배경에서는 같은 농도의 회색 짝을 쓴다 */
.section--light .text-link {
  color: var(--text-muted-on-light);
}

.section--light .text-link:hover,
.section--light .text-link:focus-visible {
  color: var(--ink);
}

/* ---------- 흐름 도식 (A → B → C) — About · Platform 공용 ---------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.flow li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.flow li:not(:last-child)::after {
  content: "→";
  content: "→" / ""; /* 화살표는 장식 — 스크린리더가 읽지 않게 */
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.section--light .flow li:not(:last-child)::after {
  color: var(--text-muted-on-light);
}

.flow--large {
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.flow--large li {
  gap: var(--sp-4);
}

/* ---------- 보드 개념도 SVG (Home · Platform 공용) ----------
   2026-10-06: Platform 의 보드 도면을 사용자 제공 개념 이미지로 바꾸면서 마크업 참조가 0건이 됐다.
   **참조가 없다고 지우지 않는다** — .source-note 를 같은 이유로 지웠다가 되살린 적이 있다 */
.board {
  --board-line: var(--ink);
  --board-name: var(--ink);
  --board-label: var(--text-muted-on-light);
  width: 100%;
  height: auto;
}

/* 어두운 섹션 위에 놓일 때 (2026-09-16 Platform 개편) — ink 선은 네이비 위에서 보이지 않는다 */
.section--navy .board,
.section--space .board {
  --board-line: var(--paper);
  --board-name: var(--paper);
  --board-label: var(--text-muted);
}

.board__edge {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.55;
}

.board__inset {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.18;
}

.board__hole {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.45;
}

.board__trace,
.board__slots {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.28;
}

/* 보드 밖으로 나가는 네 갈래와 그 끝의 접점 (2026-09-16).
   2026-09-29 사용자 요청: 파란 선을 무채색으로 바꿨다 — 도면 안의 다른 선과 같은
   --board-line 을 쓰고 농도만 한 단계 진하게 둬 확장부로 나가는 선임을 드러낸다 */
.board__wire {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.7;
}

/* 확장부는 보드 밖의 별도 상자라 테두리를 한 단계 진하게 */
.board__block--outside rect {
  stroke-opacity: 0.6;
}

.board__slots {
  stroke-opacity: 0.45;
}

.board__block rect {
  fill: transparent;
  stroke: var(--board-line);
  stroke-opacity: 0.4;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.board__label {
  font-size: 13px; /* 도면이 모바일에서 축소돼도 읽히는 최소 크기 */
  letter-spacing: 0.06em;
  fill: var(--board-label);
}

.board__name {
  font-size: 26px;
  fill: var(--board-name);
}

.board__name--sm {
  font-size: 21px;
}

/* 역할명(Embedded CPU · Monitor)은 파트번호보다 길어 한 단계 더 줄인다 (2026-09-21 수출통제 대응 표기) */
.board__name--xs {
  font-size: 16px;
}

/* ---------- 출처 표기 (2026-09-23 신설, 2026-09-29 복구) ----------
   외부 기관 수치를 쓰면 출처를 밝힌다. 새 문법을 만들지 않고 Platform 의 "개념 이미지" 고지와
   같은 장치를 쓴다 — 작은 글씨로 섹션 끝에 한 번만, 항목마다 붙이지 않는다.
   밝은 섹션·어두운 섹션 모두에서 쓰므로 색은 --text-muted-on-light 를 따라간다
   (어두운 섹션은 그 안에서 이 토큰을 어두운 짝으로 다시 정의해 둔다).
   **죽은 코드로 보고 지우지 않는다** — 2026-09-29 오전에 마크업에서 한 줄이 사라진 것을
   근거로 이 규칙까지 지웠다가, 사라진 쪽이 사고였음이 드러나 함께 되살렸다 */
.source-note {
  margin-top: var(--sp-6);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* 각주를 여러 줄로 둘 때 (2026-09-29) — 번호(¹²³)가 본문 위첨자와 1:1 로 맞는다.
   줄 사이는 문단 간격이 아니라 목록 간격이다 */
.source-note p + p {
  margin-top: var(--sp-1);
}

/* ---------- 스크롤 진입 연출 (공용, 2026-09-29 신설) ----------
   훅은 `data-reveal` 하나다. JS(home.js 의 initReveal, main.js 가 전 페이지에 마운트)가
   ① 먼저 `data-reveal-armed` 를 붙여 **그때부터** 숨김 규칙이 걸리게 하고
   ② 화면에 25% 들어오면 `data-revealed` 를 붙인 뒤 관찰을 끊는다 (한 번만 재생).
   armed 를 JS 가 붙이므로 **스크립트가 실패해도 내용이 사라지지 않는다.**

   `data-reveal="stagger"` 는 자식들이 차례로 떠오른다 (initReveal 의 [data-reveal]
   셀렉터가 값이 있어도 잡으므로 JS 를 고치지 않고 속성 하나로 단일/순차를 가른다).

   값은 Home 세 벌(10/12/14px · 0.45/0.5s)의 중간값이다. Home 쪽 규칙은
   `.shift__line[...]` 처럼 특이성이 동점이지만 이 파일이 먼저 로드되므로 **Home 이 이긴다** —
   Home 의 연출 값은 이 블록을 추가해도 바뀌지 않는다.

   **부착 지점 규칙: 뷰포트보다 큰 요소에 붙이지 않는다.** threshold 가 "면적의 25%" 라서
   세로로 뷰포트 4배가 넘는 요소는 25% 를 채울 수 없고 영구히 opacity 0 으로 남는다.
   긴 목록은 전체가 아니라 **항목마다** 붙인다 */
[data-reveal][data-reveal-armed],
[data-reveal="stagger"][data-reveal-armed] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

[data-reveal][data-revealed],
[data-reveal="stagger"][data-revealed] > * {
  opacity: 1;
  transform: none;
}

[data-reveal="stagger"][data-revealed] > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal="stagger"][data-revealed] > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal="stagger"][data-revealed] > *:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal][data-reveal-armed],
  [data-reveal][data-revealed],
  [data-reveal="stagger"][data-reveal-armed] > *,
  [data-reveal="stagger"][data-revealed] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}