/* ==========================================================================
   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;
}

/* 스크롤 후·메뉴 열림: 불투명 네이비 (블러·반투명 없음) */
.site-header.is-scrolled,
.site-header.is-menu-open {
  background-color: var(--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;
  filter: brightness(0) invert(1); /* 다크 배경용 흰색 로고 */
}

/* ---------- 메뉴: 모바일 패널 ---------- */
.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(--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(--cyan);
}

/* ---------- 하위 메뉴 (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(--cyan);
}

.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-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--paper);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------- 모바일 메뉴 버튼 ---------- */
.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);
}

/* ---------- 메뉴: 데스크톱 인라인 ---------- */
@media (min-width: 1024px) {
  .site-header__inner {
    gap: var(--sp-6);
  }

  .site-nav {
    position: static;
    max-height: none;
    overflow: visible; /* 모바일 스크롤 설정이 드롭다운을 잘라내지 않게 */
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav > ul {
    display: flex;
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
  }

  .site-nav a,
  .site-nav__trigger {
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
  }

  /* 하위 메뉴: 버튼 아래 드롭다운 */
  .site-nav__group {
    position: relative;
  }

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

  .site-nav__trigger::after {
    width: 6px;
    height: 6px;
  }

  .site-nav__sub {
    display: block;
    position: absolute;
    top: calc(100% + var(--sp-4));
    left: calc(var(--sp-5) * -1);
    min-width: 10rem;
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--line-on-dark);
    background-color: var(--navy);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  /* 버튼과 목록 사이 틈을 덮어 마우스가 지나가는 동안 닫히지 않게 */
  .site-nav__sub::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--sp-4);
  }

  .site-nav__trigger[aria-expanded="true"] + .site-nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-nav__sub a {
    font-size: var(--fs-sm);
    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(--space);
  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;
  filter: brightness(0) invert(1);
  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(--cyan);
}

.footer-copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  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;
  }
}

/* ---------- 파트너 카드 로고 (Partners 페이지 디자인 전 기본 크기 제한) ---------- */
.partner-card__logo {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

/* ---------- 텍스트 링크 (→) ---------- */
.text-link {
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.text-link:hover {
  text-decoration-thickness: 2px;
}

.section--light .text-link {
  color: var(--blue);
}

/* ---------- 흐름 도식 (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 공용) ---------- */
.board {
  --board-line: var(--ink);
  --board-name: var(--ink);
  --board-label: var(--text-muted-on-light);
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}

/* 어두운 섹션 위에 놓일 때 (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) */
.board__wire {
  fill: none;
  stroke: var(--blue);
  stroke-opacity: 0.7;
}

.board__divider {
  fill: none;
  stroke: var(--board-line);
  stroke-opacity: 0.25;
}

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

.board__label--out {
  fill: var(--blue);
}

.board__label--mid {
  text-anchor: middle;
}

.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;
}

/* ---------- AI Core Motherboard 개념도 (협력회사·Platform 공용) ----------
   2026-09-16: 협력회사 페이지에서 만든 컴포넌트를 Platform 에서도 그대로 쓰기 위해
   페이지 CSS 에서 공용 CSS 로 옮겼다. 두 페이지에 같은 그림이 반복되는 것이 의도다 */
.board-card,
.coop-board {
  --vorago: var(--blue);
  --vorago-on-dark: #6FA8EA; /* 브랜드 블루는 space 배경에서 3.92:1 로 미달 → 7.8:1 */
  --mobilint: var(--cyan);
  --mobilint-on-dark: var(--cyan); /* space 위 10.3:1 */
}

/* 보드: 밝은 섹션 위에 놓인 네이비 판 */
.board-card {
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  background-color: var(--navy);
}

.board-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--paper);
}

.board-card__caption {
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-on-dark);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.chips {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}

.chip {
  padding: var(--sp-4);
  background-color: var(--space);
  border: 1px solid var(--line-on-dark);
  border-top: 2px solid var(--accent);
}

.chip--vorago { --accent: var(--vorago); --accent-text: var(--vorago-on-dark); }
.chip--mobilint { --accent: var(--mobilint); --accent-text: var(--mobilint-on-dark); }

.chip__owner {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: var(--accent-text);
}

.chip__code {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--paper);
}

.chip__part {
  margin-top: var(--sp-3);
  white-space: pre-line; /* 지정한 자리에서 줄바꿈 (2026-09-16 사용자 요청) */
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.chip__pn {
  margin-top: var(--sp-2);
  min-height: 1em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--paper);
}

/* Platform 페이지에서는 담당사 라벨을 숨긴다 (담당사 표기는 협력회사 페이지의 몫) */
.board-card--platform .chip__owner {
  display: none;
}

.board-card--platform .chip__code {
  margin-top: 0;
}