/* ===========================================================
GeoSynap — 全局基础样式 / Top Bar / Footer / 通用原子
===========================================================
本文件移植自 Anthropic Design handoff（tmp/seo-geo/project/styles.css），
修复了原稿 .topbar-cta 后的 4 行孤儿声明（无 selector 的悬挂属性），
其余规则保持像素级一致。
设计 token 全部集中在 :root，颜色 / 字体栈 / 间距等基础变量来源唯一，
方便 §5 SEO/GEO schema 中所有页面引用同一份品牌色。
※ 字体は HTML 側で `` の async 読み込みパターンに移行（Lighthouse mobile
LCP 9.2s → 改善のため）。css `@import` はレンダーブロッキング、初回描画を
遅らせるため削除。フォント未読み込み時は system-ui にフォールバック。
============================================================ */
:root {
/* 中性色阶 —— "纸"、"墨"、"灰线" 三组层级 */
--bg: #f5f6f8;
--bg-2: #eef0f3;
--bg-3: #e4e7ec;
--paper: #ffffff;
--ink: #0a0a0a;
--ink-2: #2a2f35;
--ink-3: #6b7280;
--ink-4: #9ca3af;
--line: #d6dadf;
--line-soft: #e6e9ed;
--grid: #e6ecf0;
/* 品牌主色 teal（青绿） —— EB 风格沿用、所有強調 / hover / 関鍵数字都用它 */
--teal: #4FC0C3;
--teal-2: #38b3b6;
--teal-3: #1f8a8e;
--teal-light: #A8DCDD;
--teal-pale: #E4F4F4;
--teal-paler: #F2FAFA;
--teal-glow: rgba(79, 192, 195, 0.35);
/* teal-text：白背景上の小文字（< 14pt）用、WCAG AA 4.5:1 を満たす深い teal
`--teal-3` の #1f8a8e は白上で 4.13 で AA を僅か下回るため、META / delta / FAQ Q.ID 等
小字 mono テキストでは本トークンを使う（review #較低：color-contrast 対応） */
--teal-text: #0e5f63;
/* 暗色块（GEO Deep Dive / CTA strip / FootBar 内嵌 CTA 用） */
--dark: #0b0f13;
--dark-2: #131922;
--dark-3: #1c2530;
--dark-line: #233040;
/* 字体栈：日文走 Noto Sans JP，欧文走 Space Grotesk，编号 / META 走 JetBrains Mono */
--jp: "Noto Sans JP", system-ui, sans-serif;
--en: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
/* Skip link：a11y 必須。普段は viewport 外、フォーカス時のみ画面に出現
（review round 2「无『跳到主内容』链接」対応） */
.skip-link {
position: fixed;
top: -48px;
left: 8px;
z-index: 100;
padding: 10px 18px;
background: var(--ink);
color: var(--paper);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-decoration: none;
border: 2px solid var(--teal);
transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: none;
}
/* reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--ink);
font-family: var(--jp);
font-weight: 400;
/* palt: 日文比例字距，避免片假名 / 英数字间过宽 */
font-feature-settings: "palt";
-webkit-font-smoothing: antialiased;
line-height: 1.75;
/* anchor 平滑滚动 —— 配合 nav 锚点用，无需 JS */
scroll-behavior: smooth;
}
body {
/* fine blueprint grid —— 整页底纹 32px 蓝图网格，是 "tech / 编辑式" 视觉的关键 */
background-image:
linear-gradient(to right, var(--grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
background-size: 32px 32px;
background-position: -1px -1px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* 容器：.shell（窄）用于正文区段，.shell-wide（宽）用于本项目所有大区块 */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.shell-wide { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
/* ============ Top Bar — 顶部 sticky 导航 ============
chrome.jsx 翻译来源；右对齐 nav + 黑底 CTA 按钮
============================================================ */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(245, 246, 248, 0.85);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
font-family: var(--mono);
}
.topbar .row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
height: 56px;
}
.topbar nav {
display: flex;
align-items: stretch;
justify-content: flex-end;
padding-right: 12px;
}
.topbar nav a {
display: flex; align-items: center;
padding: 0 18px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em;
color: var(--ink-2);
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
.topbar nav a:hover { color: var(--teal-3); background: var(--paper); }
/* pulse: 用于 ticker-head / status pill 的呼吸感（每 1.4-2.4s 一次） */
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--teal-paler); }
50% { box-shadow: 0 0 0 5px rgba(79,192,195,0.15); }
}
.topbar-cta {
display: flex; align-items: center; gap: 12px;
padding: 0 24px;
background: var(--ink); color: var(--paper);
font-size: 12px; font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
height: 100%;
border-left: 1px solid var(--ink);
transition: background 0.15s;
}
.topbar-cta:hover { background: var(--teal-3); }
.topbar-cta .arr { color: var(--teal); font-family: var(--en); }
.topbar .brand {
display: flex; align-items: center; gap: 14px;
padding: 0 28px;
border-right: 1px solid var(--line);
font-family: var(--mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink);
}
.topbar .brand .brand-logo {
width: 24px; height: 24px;
color: var(--ink);
flex-shrink: 0;
}
.topbar .brand .brand-name {
font-family: var(--en);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--ink);
}
.topbar .brand .brand-name .ai {
color: var(--teal-3);
margin-left: 3px;
}
/* ============ Universal element atoms ============
跨区块复用的小组件：corner brackets / kbd 标签 / status pill / section header
============================================================ */
/* corner brackets —— 给容器四角加 14px 折角装饰 */
.brk { position: relative; }
.brk::before, .brk::after,
.brk > .brk-tr, .brk > .brk-bl {
content: ''; position: absolute; width: 14px; height: 14px;
border-color: var(--ink); border-style: solid; border-width: 0;
pointer-events: none;
}
.brk::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.brk::after { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.brk > .brk-tr { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.brk > .brk-bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.brk.teal::before, .brk.teal::after, .brk.teal > .brk-tr, .brk.teal > .brk-bl { border-color: var(--teal); }
/* mono labels —— 编号 / META 元素，灰小字 + 等宽字 + 大字间距 */
.kbd {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.kbd .acc { color: var(--teal-3); }
.kbd .dot {
display: inline-block; width: 6px; height: 6px; background: var(--teal);
margin: 0 8px 2px 0; vertical-align: middle;
}
/* status pill —— LIVE 标签 / 状态徽章 */
.status {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 5px 10px; border: 1px solid var(--ink);
background: var(--paper); color: var(--ink);
}
.status .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
box-shadow: 0 0 0 2px var(--teal-paler);
}
.status.teal { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.status.teal .dot { background: var(--paper); box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.status.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* section frame —— 全站区块默认上下间距 */
section { padding: 96px 0; position: relative; }
/* section header: 大欧文标题 + 日文副标题 + 底部 teal 标记
chat3 中清理过编号 / 坐标，仅保留 h2 双语 */
.sec-head {
display: grid; grid-template-columns: auto 1fr auto;
align-items: end; gap: 32px;
margin-bottom: 56px;
padding-bottom: 18px;
border-bottom: 1px solid var(--ink);
position: relative;
}
.sec-head::before {
content: ''; position: absolute; bottom: -4px; left: 0;
width: 80px; height: 7px; background: var(--teal);
}
.sec-head .num {
font-family: var(--mono); font-size: 12px; font-weight: 600;
color: var(--ink-3); letter-spacing: 0.16em;
}
.sec-head .num .acc { color: var(--teal-3); }
.sec-head h2 {
font-family: var(--en); font-weight: 700;
font-size: 48px; letter-spacing: -0.01em; line-height: 1;
}
.sec-head h2 .jp {
font-family: var(--jp); font-weight: 700; font-size: 18px;
margin-left: 18px; color: var(--ink-3); letter-spacing: 0.02em;
}
.sec-head .coord {
font-family: var(--mono); font-size: 11px; color: var(--ink-3);
letter-spacing: 0.1em;
}
/* ============ Footer — 4 列 grid 底栏 ============
chrome.jsx FootBar 翻译来源；最右一列是黑底 CTA 块
============================================================ */
.foot {
border-top: 1px solid var(--ink);
background: var(--paper);
padding: 48px 0 28px;
font-family: var(--mono);
}
.foot .row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr auto;
gap: 48px;
align-items: start;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
/* 旧 はヘディング順序違反（h2 → h5 で 3 段スキップ）の為、
`