---
import { ko, en } from "../i18n/content";
import "../styles/fonts.css";
import "../styles/tokens.css";
import "../styles/base.css";
interface Props {
lang: "ko" | "en";
title: string;
description: string;
}
const { lang, title, description } = Astro.props;
// 언어별로 자기 폰트만 받는다. 두 벌을 한 페이지에 로드하면 예산을 넘긴다.
const FONT_CSS = {
ko: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",
en: "https://api.fontshare.com/v2/css?f%5B%5D=switzer@400,500,600&display=swap",
} as const;
const alt = lang === "ko" ? "/en/" : "/";
// 헤더 내비게이션. 본문과 같은 콘텐츠 파일에서 온다 — 라벨을 레이아웃에
// 하드코딩하면 두 언어판이 어긋난다.
const nav = (lang === "ko" ? ko : en).nav;
// 내비 앵커는 홈의 섹션을 가리킨다. 홈이 아닌 페이지(쇼케이스 등)에서는
// "#pipeline" 이 그 페이지 안의 없는 앵커가 되어 아무 일도 하지 않는다 —
// 홈 경로를 붙여 홈 섹션으로 건너가게 한다.
const homePath = lang === "ko" ? "/" : "/en/";
const normalizedPath = Astro.url.pathname.replace(/\/+$/, "") || "/";
const isHome = normalizedPath === (lang === "ko" ? "/" : "/en");
const navItems = nav.items.map((i) => ({
...i,
href: !isHome && i.href.startsWith("#") ? `${homePath}${i.href}` : i.href,
}));
// 파비콘: 페이지의 스파인 모티프를 그대로 쓴 단순 기하 마크.
// data: URI 안의 SVG 는 상위 문서의 커스텀 프로퍼티를 읽지 못한다.
// 하드 게이트 #1 의 유일한 예외이고, 값은 tokens.css 와 손으로 맞춘다.
// MARK_BG = --accent-inverse · MARK_FG = --surface-inverse
const MARK_BG = "#0E6B63";
const MARK_FG = "#F4F2EC";
const FAVICON =
"data:image/svg+xml," +
encodeURIComponent(
``,
);
---
{title}
{/* JS 가 살아 있으면 no-js 를 떼고 진입 연출을 켠다 */}
{lang === "ko" ? "본문으로 건너뛰기" : "Skip to content"}
{/* 언어는 국가가 아니다. 국기 아이콘을 쓰지 않는다.
좁은 화면(<480px)에서는 이 버튼이 사라지고 메덹 안 행으로 들어간다 */}
{lang === "ko" ? "English" : "한국어"}
{/* 모바일 메뉴. details 라 JS 가 0바이트에 가깝고, 열림 상태,
Esc, 포커스 순서, aria-expanded 를 브라우저가 이미 맞게 한다.
직접 만들면 그 넷을 전부 다시 구현해야 하고 보통 틀린다.
시트는 알약 전체 폭으로 열린다 — 11rem 짜리 조각 상자가 아니라 */}