@charset "UTF-8";
/*!
 * Mooto · layout.css
 * 全局组件：顶部导航 / 抽拉菜单 / 全屏搜索 / 手机底部导航 / 提示条 / 背景音乐
 * 全站只加载一次。原站把这一整段复制了 6 次（每个页面一次）。
 */

/* ============================================================
   1. 复选框驱动的遮罩层
   原站用 :checked + ~ 兄弟选择器的写法，不依赖 JS 就能开合，
   这里保留该思路（更稳、更快、无 JS 也不失效），
   同时补上 aria 与 Esc 关闭（见 theme.js）。
   ============================================================ */
.toggle-input {
	position: fixed;
	top: -9999px;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.menu-overlay,
.search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 99999;
}

#menuToggle:checked ~ .menu-overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: clamp(24px, 4vh, 44px);
	background: #fff;
}

#searchToggle:checked ~ .search-overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 var(--pad);
	background: #fff;
}

/* ============================================================
   2. 顶部导航
   ============================================================ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--nav-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 var(--pad);
	background: rgba(255, 255, 255, .86);
	border-bottom: 1px solid transparent;
	transition: background .35s ease, border-color .35s ease;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

.nav.is-solid { background: rgba(255, 255, 255, .98); border-bottom-color: var(--line); }

.nav__zone { display: flex; align-items: center; min-width: 0; }
.nav__zone--l { justify-content: flex-start; }
.nav__zone--r { justify-content: flex-end; }

.nav__side { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }

.nav__link {
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--fg);
	opacity: .55;
	transition: opacity .3s;
	white-space: nowrap;
}

.nav__link:hover,
.nav__link.current-menu-item,
.nav__link[aria-current="page"] { opacity: 1; }

/* Logo：大字 + 小字 */
.nav__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--fg);
	white-space: nowrap;
}

.nav__logo-main {
	font-size: clamp(30px, 3.2vw, 46px);
	letter-spacing: .18em;
	margin-right: -.18em;
	font-weight: 500;
	line-height: 1;
	transition: color .3s ease;
	/* ★ 小蝴蝶的定位基准。position:relative 只为了给下面那个绝对定位的孩子
	   一个包含块；它自身不改变任何排版（绝对定位元素不参与行盒）。 */
	position: relative;
	/* 小蝴蝶的**翼展**（px）。桌面 30 / 平板 24 / 手机 22，三档在文件下方媒体查询里给。
	   ★ 第十四轮：蝴蝶从"停在「i」旁边"改成**沿一条航线飞过整条字标**
	     （起点 i 左下方 → 顶点 两个 o 正上方 → 终点 第三个 o 右方，3 秒一循环）。
	     下面关于"锚在 i 墨迹顶"的反解已经不是约束了，尺寸这一档基本沿用，
	     因为它在三个断点上都被实拍验证过，不必因为换了运动方式就重调。
	   ★ **航线走 em、翼展走 px** —— 这是本轮唯一要想清楚的一件事：
	     · 航线以字号 em 为单位 ⇒ 手机端自动等比缩到字标尺度，不用另写一套；
	     · 但翼展**不能**跟着走 em：手机字号 22px，等比下来翼展只剩 13~15px，
	       那个尺寸上条带读不出是蝴蝶（第十二轮 1 倍屏实拍：30 是下沿）。
	     两条线各管各的：**位置自相似，尺寸保可读**。
	   ★ 尺寸的真正上界仍然受**导航高度**约束：
	     条带 16 帧的墨迹高上限 = 0.854 × 翼展（实测），
	     桌面 118 高配 30 → 墨高 25.6px；平板 88 配 24 → 20.5px；
	     手机 80 配 22 → 18.8px。航线上下的起伏只有 ±0.024em，
	     所以三档都留得住余量（顶点处离导航上沿实测 15.9 / 12.6 / 15.3 px）。
	     想再调，改这一个数就行（js 直接读它）。 */
	--nav-mark: 30px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 小蝴蝶：沿航线飞过字标（纯装饰，pointer-events:none）
 *
 * ★ 它是**和首页海棠花那只同一只** —— 同一张 16 帧侧视条带、同一段
 *   `k = 翼展 / 159.09` 重采样、同一个 −1 镜像（头朝右）。
 *   唯一的区别：首页那只锚在**一颗未盛开的花苞**上，这只**在飞** ——
 *   起点在「i」的左下方、顶点在两个 o 的正上方、终点在第三个 o 的右方。
 *
 * ★ 为什么不把首字母包成 <span> 再定位：
 *   拆文本节点会改变字距（i 和 M 之间哪怕差半像素都看得出来），
 *   而且后台一改字标文案（外观 → 茉棠设置 → 字标）就得重新对。这里改成
 *   **光靠 em 锚到 .nav__logo-main 的左上角** —— 文本框左边就是第一个字的
 *   起点（letter-spacing 是加在字后面的，不会往前推）。
 *   整个航线的三个锚点也全部以 em 表达，所以换字号/换断点自动等比。
 *
 * ★ em 从哪来（四个视口 DSF=4 实测，不是估的）：
 *   「i」墨迹相对 .nav__logo-main 左上角：left .071em top .115em
 *   基线 .848em；两个 o 的中间 2.03em；第三个 o 右缘 3.77em；词墨迹止于 3.87em。
 *   320 / 390 / 768 / 1440 四块屏折成 em 之后一致（差值 ≤ 0.05em）。
 *
 * ★ 谁负责什么：
 *   本文件只给"盒子"—— 绝对定位、不吃命中、以及翼展这个变量。
 *   盒子里的 <canvas> 由 **assets/js/theme.js 末尾那个模块**（搜 `nav__mark`）
 *   每帧重画，并用一个 transform 把枢轴送到航线的当前位置上。
 *   —— 之所以塞进 theme.js 而不是单独一个 nav-butterfly.js：后台"主题文件编辑器"
 *      只能改**已存在**的文本文件，建不了新文件，而 theme.js 是全站已排队的，
 *      另起一个文件就得多走一次「外观 → 主题文件」+ functions 排队，不划算。
 * ───────────────────────────────────────────────────────────────────────── */
.nav__mark {
	position: absolute;
	left: 0;
	top: 0;
	/* 装饰件：点它等于点 logo 的空白，交给外层 <a> 处理。
	   实测 elementFromPoint 打在蝴蝶的中心/左翼/右翼，命中的都是
	   .nav__zone / .nav 本身，不会多出一个不可点击区。 */
	pointer-events: none;
	/* 画布会每帧改 transform 做浮动，先提一层，避免逐帧重排 */
	will-change: transform;
}

.nav__mark canvas { display: block; }

.nav__logo-sub {
	font-size: clamp(8px, .62vw, 10px);
	letter-spacing: .4em;
	margin-right: -.4em;
	margin-top: .65em;
	font-weight: 300;
	color: var(--muted);
	line-height: 1;
	font-family: var(--sans);
}

.nav__logo img { max-height: 46px; width: auto; }

/* 移动端图标按钮（桌面端隐藏） */
.nav__icons { display: none; align-items: center; gap: 0; }

.nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--fg);
	opacity: .72;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: opacity .25s ease;
}

.nav__icon:hover { opacity: 1; }
.nav__icon:active { opacity: .45; }
.nav__icon svg { width: 19px; height: 19px; pointer-events: none; }

.nav__icon.is-playing svg { animation: music-pulse 1.2s ease-in-out infinite; }
@keyframes music-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ★ 手机端右侧那一格（原电话 → 现在的「预约」）走的就是 .nav__icon，
   没有单独的类。
   中间试过一版「日历 + 预约」的深色胶囊，访客看过之后说
   「变成一个预约按钮即可，不用写汉字」—— 于是退回一枚纯图标，
   和它右边的音乐、左边的菜单 / 搜索逐项同规格
   （44×44 命中区、19px 描边、opacity .72）。
   ★ 宽度这件事因此是白送的：右侧两格从 ~106px 收回到 88px，
     320px 的老机型上也不会把中间的 Logo 挤歪。 */

/* 背景音乐播放器 */
.mooto-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================
   3. 抽拉菜单
   ============================================================ */
.menu-overlay a {
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: .26em;
	color: var(--fg);
	opacity: .7;
	transition: opacity .3s;
	position: relative;
	z-index: 2;
}

.menu-overlay a:hover { opacity: 1; }

.menu-backdrop { position: absolute; inset: 0; cursor: default; }

.menu-close {
	position: absolute;
	top: calc(var(--nav-h) / 2);
	right: var(--pad);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
	touch-action: manipulation;
	z-index: 3;
}

.menu-close:hover { opacity: 1; }
.menu-close svg { width: 22px; height: 22px; pointer-events: none; }

/* ============================================================
   4. 全屏搜索
   ============================================================ */
.search-close {
	position: absolute;
	top: calc(var(--nav-h) / 2);
	right: var(--pad);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
	touch-action: manipulation;
	z-index: 3;
}

.search-close:hover { opacity: 1; }
.search-close svg { width: 22px; height: 22px; pointer-events: none; }

.search-box { width: min(760px, 100%); text-align: center; }

.search-kicker {
	font-size: 10px;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(24px, 3.5vh, 40px);
}

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(10, 10, 10, .2);
	padding-bottom: 14px;
	transition: border-color .4s ease;
}

.search-form:focus-within { border-bottom-color: rgba(10, 10, 10, .8); }

.search-input {
	flex: 1;
	font-family: var(--serif);
	font-size: clamp(22px, 3.4vw, 42px);
	font-weight: 300;
	letter-spacing: .06em;
	color: var(--fg);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.search-input::placeholder { color: rgba(10, 10, 10, .2); }

.search-submit {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fg);
	opacity: .5;
	cursor: pointer;
}

.search-submit:hover { opacity: 1; }
.search-submit svg { width: 20px; height: 20px; pointer-events: none; }

.search-hot {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-top: clamp(30px, 4.5vh, 50px);
}

.search-hot span { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }

.search-hot a {
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--soft);
	padding: 8px 4px;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, color .3s;
}

.search-hot a:hover { border-bottom-color: rgba(10, 10, 10, .4); color: var(--fg); }

/* ============================================================
   5. 提示条
   ============================================================ */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom));
	transform: translate(-50%, 12px);
	padding: 13px 24px;
	background: rgba(10, 10, 10, .94);
	color: #fff;
	font-size: 11px;
	letter-spacing: .24em;
	border-radius: 100px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, transform .35s ease, visibility .35s;
	z-index: 2147483647;
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100vw - 40px);
}

.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================
   6. 手机端底部导航
   ============================================================ */
.tabbar { display: none; }

/* ============================================================
   6.5 返回顶部
   原站的表现：页面高度超过一屏才出现，点击平滑回到顶部。
   这里做成可配置（开关 / 图标 / 阈值 / 位置 / 圆或方），
   并且手机上会自动浮到底部导航之上，不会被挡住。
   ============================================================ */
.backtop {
	position: fixed;
	right: clamp(16px, 2.4vw, 34px);
	bottom: clamp(20px, 3vh, 40px);
	z-index: 1100;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .4s ease, visibility .4s ease, color .3s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.backtop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }

.backtop__circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--line);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	transition: background .3s ease, border-color .3s ease;
}

.backtop:hover .backtop__circle { background: var(--fg); border-color: var(--fg); }
.backtop:hover { color: #fff; }
.backtop:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.backtop.is-show:active { transform: translateY(0) scale(.93); }

.backtop__icon { position: relative; z-index: 1; width: 18px; height: 18px; pointer-events: none; }

.backtop--left { right: auto; left: clamp(16px, 2.4vw, 34px); }
.backtop--plain .backtop__circle { background: transparent; border-color: rgba(10, 10, 10, .2); box-shadow: none; }
.backtop--plain:hover .backtop__circle { background: var(--fg); border-color: var(--fg); }
.backtop--square .backtop__circle { border-radius: var(--radius-sm); }

/* ============================================================
   7. 断点
   ============================================================ */
@media (max-width: 900px) {
	:root {
		--nav-h: 88px;
		--radius-sm: calc(10px * var(--radius-scale));
		--radius-md: calc(16px * var(--radius-scale));
		--radius-lg: calc(22px * var(--radius-scale));
	}

	.nav { grid-template-columns: 1fr auto 1fr; padding: 0 clamp(10px, 3vw, 20px); }
	.nav__side { display: none; }
	.nav__icons { display: flex; }

	.nav__logo-main { font-size: 24px; letter-spacing: .16em; margin-right: -.16em; --nav-mark: 24px; }
	.nav__logo-sub { font-size: 7px; letter-spacing: .32em; margin-right: -.32em; margin-top: .5em; }
	.nav__logo img { max-height: 30px; }

	.search-close,
	.menu-close { top: calc(var(--nav-h) / 2); right: clamp(10px, 3vw, 20px); }

	.tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1200;
		height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, .98);
		border-top: 1px solid var(--line);
		align-items: stretch;
		justify-content: space-around;
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
	}

	.tabbar__item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 11px;
		gap: 5px;
		color: rgba(10, 10, 10, .42);
		font-size: 9px;
		letter-spacing: .12em;
		transition: color .3s;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		outline: none;
		cursor: pointer;
		background: transparent;
		border: 0;
		text-decoration: none;
	}

	.tabbar__item.is-active { color: var(--fg); }

	.tabbar__icon { width: 20px; height: 20px; pointer-events: none; }
	.tabbar__label { pointer-events: none; }

	/* ★ 修复：中间那个圆 "凸" 在导航条外面 26px，那一段不在 <a> 的盒子里，
	   手指点上去会直接穿透到页面 —— 表现为 "点不动 / 第一次点没反应"。
	   这里补一个透明热区，把整个圆连同它的白色描边一起纳进来。
	   伪元素不是 DOM 节点，命中它的点击事件目标就是宿主 <a>，所以能正常拨号。 */
	.tabbar__item--center::before {
		content: '';
		position: absolute;
		left: 50%;
		top: -31px;
		width: 62px;
		height: 62px;
		transform: translateX(-50%);
		border-radius: 50%;
		z-index: 1;
	}

	.tabbar__item--center .tabbar__circle {
		position: absolute;
		top: -26px;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: var(--fg);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(0, 0, 0, .14);
		pointer-events: none;
	}

	.tabbar__item--center .tabbar__circle .tabbar__icon { width: 17px; height: 17px; color: #fff; }
	.tabbar__item--center .tabbar__label { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }

	.footer { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }

	/* 底部导航存在时，返回顶部按钮上移，避免被遮住 */
	body.has-tabbar .backtop {
		bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
	}

	.backtop { width: 44px; height: 44px; right: clamp(12px, 3vw, 20px); }
	.backtop--left { right: auto; left: clamp(12px, 3vw, 20px); }
}

@media (max-width: 600px) {
	:root { --nav-h: 80px; }
	.nav__logo-main { font-size: 22px; --nav-mark: 22px; }
	.nav__logo-sub { font-size: 6.5px; letter-spacing: .28em; margin-right: -.28em; }
	.search-input { font-size: 22px; }
}

/* 打印：去掉固定导航与遮罩 */
@media print {
	.nav,
	.tabbar,
	.toast,
	.backtop,
	.menu-overlay,
	.search-overlay { display: none !important; }
}

/* 减少动态效果：小蝴蝶停在条带的第 5 帧（半开），不再扇、也不浮沉。
   ★ 处理搬到 js/nav-butterfly.js 里了 —— 扇翅现在由**条带帧**驱动
     （不是 CSS 压 scaleX），"停在哪一相"只有拿到条带的人说得准。
   ★ 但这一只**没有整体隐藏**：它是导航的一部分，字标旁边空一块更奇怪。
     首页那只在 reduced-motion 下是整个不启用的（它要"飞"，静态反而碍眼），
     两只在这个偏好下的处理**故意不同**。 */