/*
  SANSOU House 网页模板主样式
  功能：控制页面布局、颜色、字体、卡片、图片占位、移动端抽屉。
  使用方法：
  1. 修改 :root 中的变量可以快速更换主题色、圆角、左右栏比例。
  2. 将真实图片放到 assets/ 对应路径后，可把 .placeholder-image 换成 img 或使用 background-image。
  3. 房间图片尺寸可通过 --room-ratio、--roof-ratio 调整。
*/
:root {
  --main-width: 70%;              /* 左侧主要功能区宽度，可改为 68%、72% 等 */
  --house-width: 30%;             /* 右侧房屋展示区宽度 */
  --room-ratio: 2600 / 1463;           /* 普通房间图片比例 */
  --roof-ratio: 2914 / 1236;        /* 最上方屋檐图片比例 */
  --foundation-ratio: 3790 / 843;   /* 最下方地基图片比例 */
  --roof-display-width: 95%;      /* 屋檐显示宽度；100% 可完整显示 roof.png，避免左右裁切 */
  --foundation-display-width: 124%; /* 地基略宽于房间，但不制造横向滚动 */
  --room-size-percent: 85%;       /* 普通房间显示大小百分比；默认调整 room-01 宽度 */
  --room-display-width: var(--room-size-percent); /* 下方房间显示宽度；默认跟随 --room-size-percent */
  --coming-soon-room-ratio: 2600 / 1458; /* room-02 coming soon 房间图片比例 */
  --coming-soon-room-size-percent: var(--room-size-percent); /* room-02 coming soon 房间显示大小 */
  --green: #5f8f21;
  --green-dark: #39620f;
  --cream: #e6f7ff;
  --paper: #e6f7ff;               /* 页面和主内容使用浅蓝底色，衬托白云 SVG */
  --sky: #dff4ff;                 /* 天空蓝，可调整 */
  --cloud: #ffffff;               /* 云朵白，可调整 */
  --grass: #bfe188;               /* 草地绿，可调整 */
  --line: #eadfc8;
  --ink: #2f241c;
  --muted: #786a5c;
  --peach: #ffe2d2;
  --blue: #dff1ff;
  --shadow: 0 20px 50px rgba(105, 80, 42, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --main-content-spacing-extra: 44px; /* 左侧主内容容器统一增加的间距 */
  --main-fixed-content-width: 760px; /* 左侧主内容固定宽度：hero / section / footer 统一 */
  --mobile-fixed-content-width: 340px; /* 手机端左侧主内容固定宽度 */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Noto Sans SC", sans-serif;
--house-extra-top: 70px; /* 在导航栏高度基础上额外下移 */
}

@media (min-width: 821px) {
  .house-panel {
    padding-top: calc(
      var(--header-height) + var(--header-offset) * 2 + 18px + var(--house-extra-top)
    ) !important;
  }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--ink);
  touch-action: manipulation;
  overflow-x: hidden;
}

/* 全网页背景装饰：桌面端挂在 body 上，避免居中容器边缘出现断层。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("../assets/backgrounds/cloud-top.svg"),
    url("../assets/backgrounds/cloud-1.svg"),
    url("../assets/backgrounds/cloud-2.svg"),
    url("../assets/backgrounds/cloud-3.svg"),
    url("../assets/backgrounds/cloud-4.svg"),
    url("../assets/backgrounds/hill.svg");
  background-repeat: no-repeat;
  background-position:
    center top,
    6% 11%,
    74% 8%,
    20% 48%,
    92% 50%,
    center bottom;
  background-size:
    min(980px, 96%) auto,
    min(210px, 18vw) auto,
    min(165px, 14vw) auto,
    min(230px, 19vw) auto,
    min(200px, 17vw) auto,
    min(1180px, 96%) auto;
  opacity: .72;
}

/* 隐藏原生滚动条：仍可用鼠标滚轮、触控板和触摸滚动。 */
html, body, .main-panel, .house-panel {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧版 Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.main-panel::-webkit-scrollbar,
.house-panel::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}
a { color: inherit; text-decoration: none; }
a,
button,
[role="button"],
input,
textarea,
select {
  touch-action: manipulation;
}
button, input, textarea, select { font: inherit; }

/* 两栏布局：左 70%、右 30%。 */
.app-shell {
  width: min(1480px, calc(100vw - 28px));
  height: calc(100vh - 28px);
  margin: 14px auto;
  display: grid;
  grid-template-columns: var(--main-width) var(--house-width);
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0 0 10px 10px;
  overflow: visible;
  box-shadow: none;
}

/* 手机端会重新启用这层，以便草地贴住移动浏览器可视区。 */
.app-shell::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("../assets/backgrounds/cloud-top.svg"),
    url("../assets/backgrounds/cloud-1.svg"),
    url("../assets/backgrounds/cloud-2.svg"),
    url("../assets/backgrounds/cloud-3.svg"),
    url("../assets/backgrounds/cloud-4.svg"),
    url("../assets/backgrounds/hill.svg");
  background-repeat: no-repeat;
  background-position:
    center top,
    6% 11%,
    74% 8%,
    20% 48%,
    92% 50%,
    center bottom;
  background-size:
    min(980px, 96%) auto,
    min(210px, 18vw) auto,
    min(165px, 14vw) auto,
    min(230px, 19vw) auto,
    min(200px, 17vw) auto,
    min(1180px, 96%) auto;
  opacity: .72;
}
.house-panel::before {
  content: none;
  display: none;
}

/* 左侧主要功能区：固定区域，内部独立滚动。 */
.main-panel {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  padding: calc(34px + var(--main-content-spacing-extra)) calc(46px + var(--main-content-spacing-extra)) calc(28px + var(--main-content-spacing-extra));
  background-color: transparent;
}

.main-panel::before {
  content: none;
  display: none;
}
.main-panel > * { position: relative; z-index: 1; }

/* 右侧房屋展示区：固定区域，内部独立滚动；可任意增加 room-image，不影响左侧长度。 */
.house-panel {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: visible;
  padding-bottom: 0;
  background-color: transparent;
  border-left: 0;
}
.house-panel > * { position: relative; z-index: 1; }

.site-header {
  position: sticky;
  top: -34px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 30px;
  background: linear-gradient(180deg, rgba(243,251,255,0.98), rgba(243,251,255,0.84));
  backdrop-filter: blur(12px);
}
.brand { font-size: clamp(24px, 2.4vw, 38px); font-weight: 900; letter-spacing: -0.06em; }
.desktop-nav { display: flex; gap: 30px; font-weight: 700; font-size: 14px; }
.desktop-nav a:hover, .view-all:hover, .text-link:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.language-select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--ink);
}
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 15px 28px;
  background: linear-gradient(180deg, #70a329, var(--green-dark));
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(78,112,25,.22);
  cursor: pointer;
}
.primary-button.small { padding: 12px 20px; font-size: 13px; }
.drawer-toggle { display: none; }

.hero {
  position: relative;
  min-height: 480px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 20px;
  padding: 58px 56px;
  border-radius: var(--radius-xl);
  background-color: var(--sky);
  overflow: hidden;
}
.hero::after {
  content: none;
  display: none;
}
.hero::before, .contact-banner::before {
  content: none;
  display: none;
}
.hero-copy, .hero-illustration { position: relative; z-index: 2; }
.eyebrow { color: var(--green); font-weight: 800; font-size: 22px; }
h1 { margin: 14px 0 18px; font-size: clamp(42px, 5.4vw, 70px); line-height: 0.95; letter-spacing: -0.06em; }
.hero p { max-width: 380px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.text-link { font-weight: 800; color: var(--green-dark); }
.hero-img { position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; }


.placeholder-image {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(120, 89, 45, 0.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.1)),
    repeating-linear-gradient(-45deg, rgba(95,143,33,.08) 0 12px, rgba(244,184,136,.08) 12px 24px);
  color: rgba(47,36,28,.68);
  font-weight: 800;
  text-align: center;
}
.placeholder-image::after {
  content: attr(data-name) "  /  " attr(data-size) "  可替换，尺寸可改";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: 12px;
  color: var(--muted);
}

.slider-controls { display: flex; align-items: center; justify-content: center; gap: 28%; margin: 22px 0 120px; }
.dots { display: flex; gap: 22px; }
.dots span { width: 13px; height: 13px; border-radius: 50%; background: #ded6c8; }
.dots .active { background: var(--green); }
.arrows { display: flex; gap: 14px; }
.arrows button { width: 48px; height: 48px; border: 0; border-radius: 14px; background: #eef6df; font-size: 28px; color: var(--ink); cursor: pointer; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 120px; }
.feature-card, .news-card, .goods-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 24px rgba(105, 80, 42, 0.05);
}
.feature-card { min-height: 250px; padding: 28px 20px; text-align: center; }
.icon-bubble { width: 96px; height: 96px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 0; background: transparent; color: var(--green); font-size: 38px; }
.icon-bubble img { width: 100%; height: 100%; object-fit: contain; display: block; }
.feature-card h3, .news-card h3, .goods-card h3 { margin: 0 0 12px; font-size: 18px; }
.feature-card p, .news-card p, .goods-card p { margin: 0; color: var(--muted); line-height: 1.55; }

.content-section { margin: 0 0 120px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-heading > div { display: flex; align-items: center; gap: 10px; }
.section-heading h2 { margin: 0; font-size: 24px; }
.leaf, .view-all { color: var(--green); font-weight: 900; }
.notice-list { display: grid; gap: 10px; }
.notice-list article { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.7); }
time { color: var(--muted); font-size: 13px; }
.notice-list p { margin: 0; }
.news-grid, .goods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card, .goods-card { padding: 16px; }
.news-image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin-bottom: 14px; }
.goods-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; margin-bottom: 14px; }

.contact-banner {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: center;
  min-height: 420px;
  padding: 52px 60px;
  border-radius: var(--radius-xl);
  background-color: var(--sky);
  overflow: hidden;
}
.contact-banner::after {
  content: none;
  display: none;
}
.contact-copy, .contact-illustration { position: relative; z-index: 1; }
.contact-copy h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 76px); line-height: .95; font-weight: 500; }
.contact-form { display: grid; gap: 12px; margin-top: 24px; }
.contact-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: rgba(255,255,255,.84); color: var(--ink); }
.contact-illustration { min-height: 330px; border-radius: 22px; }

.contact-jump-section {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.contact-jump-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 260px;
  min-height: 64px;
  padding: 8px 34px 8px 22px;
  border: 3px solid var(--accent-blue);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: var(--accent-blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.contact-jump-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}
.contact-jump-button:hover {
  background: rgba(255,255,255,.82);
  filter: none;
}

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 42px 0 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }

.floating-top-button {
  position: absolute;
  right: calc(var(--house-width) + 50px);
  bottom: 35px;
  z-index: 20;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.top-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(78,112,25,.16));
  transition: transform .18s ease, filter .18s ease;
}
.floating-top-button:hover {
  color: var(--green);
}
.floating-top-button:hover .top-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 16px rgba(78,112,25,.22));
}

.paper-plane-stage {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
.paper-plane {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(58px, 6.2vw, 96px);
  height: auto;
  user-select: none;
  transform-origin: 52% 52%;
  filter: drop-shadow(0 12px 16px rgba(38, 84, 104, 0.18));
  will-change: transform, filter;
}
/* 磁吸中：轻微阴影加深，不使用高亮色 */
.paper-plane.is-attracted {
  filter: drop-shadow(0 14px 20px rgba(38,84,104,.26));
  transition: filter .22s ease;
}
.paper-plane.is-proximity-slow {
  animation: planeProximityPulse 0.62s ease-in-out infinite alternate;
}
@keyframes planeProximityPulse {
  0% {
    filter:
      brightness(1.02)
      drop-shadow(0 12px 16px rgba(38, 84, 104, 0.18))
      drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  100% {
    filter:
      brightness(1.18)
      drop-shadow(0 16px 22px rgba(38, 84, 104, 0.22))
      drop-shadow(0 0 16px rgba(255, 255, 255, 0.96))
      drop-shadow(0 0 30px rgba(255, 255, 255, 0.74));
  }
}
.plane-proximity-aura {
  position: absolute;
  left: -64px;
  top: -64px;
  z-index: 1;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.plane-proximity-aura.active {
  opacity: 1;
}
.plane-proximity-aura::before,
.plane-proximity-aura::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.82),
    inset 0 0 16px rgba(255, 255, 255, 0.34);
  animation: planeAuraExpand 1.1s ease-out infinite;
}
.plane-proximity-aura::after {
  animation-delay: 0.55s;
}
@keyframes planeAuraExpand {
  0% {
    transform: scale(0.45);
    opacity: 0.95;
  }
  78% {
    opacity: 0.24;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* ── 待机星型扩散特效（6 条臂 × 白色圆点向外扩散循环） ── */
.plane-idle-star {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 63;
  pointer-events: none;
  width: 0;
  height: 0;
  display: none;
}
.plane-idle-star.active { display: block; }

/* 每条臂旋转到对应角度，dot 沿父元素的"正上方"向外移动 */
.plane-idle-arm {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 60deg));
}
.plane-idle-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  top: -2.5px;
  left: -2.5px;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.55);
  animation: idleDotExpand 1.5s cubic-bezier(0.18, 0.82, 0.4, 1) infinite;
  animation-delay: calc(var(--i) * -0.25s);
}
@keyframes idleDotExpand {
  0%   { transform: translateY(0px);   opacity: 0;   scale: 1.3; }
  12%  { opacity: 1; }
  75%  { transform: translateY(-26px); opacity: 0.35; }
  100% { transform: translateY(-32px); opacity: 0;   scale: 0.6; }
}

/* ── 飞行拖尾：canvas 连续线条，宽度/长度在 js/main.js 的 TRAIL_* 参数调整 ── */
.plane-trail-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}
.paper-plane-debug {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 61;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(78, 108, 130, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

.mobile-drawer-header { display: none; }
.room-image {
  display: block;
  aspect-ratio: var(--room-ratio);
  width: var(--room-display-width);
  height: auto;
  object-fit: cover;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
}
.roof-image {
  aspect-ratio: var(--roof-ratio);
  width: var(--roof-display-width);
  max-width: none;
  object-fit: contain;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}
.foundation-image {
  aspect-ratio: var(--foundation-ratio);
  width: var(--foundation-display-width);
  max-width: none;
  object-fit: contain;
  margin-left: 50%;
  margin-right: 0;
  margin-top: 0 !important;
  transform: translateX(-50%);
}
.room-image + .room-image { margin-top: 0; }

.room-stage {
  position: relative;
  overflow: hidden;
}
.coming-soon-room {
  aspect-ratio: var(--coming-soon-room-ratio);
  width: var(--coming-soon-room-size-percent);
}
.room-base-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-character-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* 房间 01 角色动画参数：
   - 当前动效文件来自 assets/rooms/rm-motion-01。
   - --room-01-*-left / --room-01-*-top：调整各状态在房间内的展示位置。
   数值可用百分比或 px；百分比以 room-01 房间容器为基准。
*/
.room-01-stage {
  --room-01-actor-width: 33%;
  --room-01-miemie-sit-left: 75%;
  --room-01-miemie-sit-top: 95%;
  --room-01-miemie-motion-left: 75%;
  --room-01-miemie-motion-top: 95%;
  --room-01-nini-sit-left: 26%;
  --room-01-nini-sit-top: 91%;
  --room-01-nini-motion-left: 26%;
  --room-01-nini-motion-top: 102%;
  --room-01-set-left: 80%;
  --room-01-set-top:100%;
}
.room-motion-layer {
  pointer-events: none;
}
.room-actor {
  position: absolute;
  z-index: 2;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -100%);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: left, opacity;
}
.room-01-actor {
  width: var(--room-01-actor-width);
  animation-duration: 36s;
}
.room-01-actor-sit-miemie {
  left: var(--room-01-miemie-sit-left);
  top: var(--room-01-miemie-sit-top);
  animation-name: room01SitMiemie;
}
.room-01-actor-motion-miemie {
  left: var(--room-01-miemie-motion-left);
  top: var(--room-01-miemie-motion-top);
  animation-name: room01MotionMiemie;
}
.room-01-actor-sit-nini {
  left: var(--room-01-nini-sit-left);
  top: var(--room-01-nini-sit-top);
  animation-name: room01SitNini;
}
.room-01-actor-motion-nini {
  left: var(--room-01-nini-motion-left);
  top: var(--room-01-nini-motion-top);
  animation-name: room01MotionNini;
}
.room-01-actor-motion-set {
  left: var(--room-01-set-left);
  top: var(--room-01-set-top);
  animation-name: room01MotionSet;
}

@keyframes room01SitMiemie {
  0%, 24.9% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes room01MotionMiemie {
  0%, 49.9% { opacity: 0; }
  50%, 74.9% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes room01SitNini {
  0%, 24.9% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes room01MotionNini {
  0%, 24.9% { opacity: 0; }
  25%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes room01MotionSet {
  0%, 74.9% { opacity: 0; }
  75%, 99.9% { opacity: 1; }
  100% { opacity: 0; }
}

.drawer-mask { display: none; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 16px; font-size: 13px; }
  .main-panel { padding-inline: 28px; }
  .hero, .contact-banner { padding: 42px 34px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .goods-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  :root { --main-width: 100%; --house-width: 0%; }
  body { background: var(--paper); }
  .app-shell { width: 100%; height: 100vh; margin: 0; display: block; border-radius: 0; }
  .main-panel { width: 100%; height: 100vh; padding: 20px 18px 40px; }
  .main-panel::before { inset: 0; }
  .site-header { top: -20px; padding: 14px 0 18px; }
  .desktop-nav, .primary-button.small { display: none; }
  .drawer-toggle { display: inline-flex; border: 0; border-radius: 999px; padding: 10px 14px; background: #eef6df; color: var(--green-dark); font-weight: 900; }
  .language-select { max-width: 110px; padding: 9px 10px; }
  .hero { grid-template-columns: 1fr; min-height: 520px; padding: 0; }
  .hero-img { top: 0; bottom: auto; width: 100%; height: 65%; }
  .hero-copy .eyebrow { font-size: 13px; }
  .hero-copy h1 { font-size: 26px; margin: 6px 0 8px; }
  .hero-copy p { font-size: 13px; line-height: 1.5; margin: 0; }
  .hero-actions { margin-top: 14px; gap: 12px; }
  .hero-actions .primary-button { padding: 10px 18px; font-size: 13px; }
  .hero-actions .text-link { font-size: 13px; }
  .slider-controls { gap: 24px; }
  .feature-grid, .news-grid, .goods-grid { grid-template-columns: 1fr; }
  .notice-list article { grid-template-columns: 1fr; gap: 6px; }
  .contact-banner { grid-template-columns: 1fr; padding: 34px 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .floating-top-button {
    right: 18px;
    bottom: 22px;
  }
  .top-icon {
    width: 42px;
    height: 42px;
  }

  /* 移动端：右侧房屋变成抽屉，默认隐藏，点击 Rooms 打开。 */
  .house-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: min(88vw, 420px);
    height: 100vh;
    transform: translateX(105%);
    transition: transform .28s ease;
    box-shadow: -20px 0 50px rgba(47, 36, 28, .22);
  }
  .roof-image { width: var(--roof-display-width); }
  .house-panel.open { transform: translateX(0); }
  .drawer-mask.open { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(47,36,28,.36); }
  .mobile-drawer-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: rgba(255,244,219,.94); backdrop-filter: blur(10px); }
  .mobile-drawer-header button { border: 0; background: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; cursor: pointer; }
}

/* =========================
   v3 修改：全页毛玻璃导航、搜索框、自定义语言菜单、TOP 自动轮播
   ========================= */
:root {
  --header-height: 84px;          /* 导航栏高度，可根据 logo / 菜单数量调整 */
  --header-offset: 22px;          /* 导航栏距离页面边缘的距离 */
  --accent-blue: #01ceca;         /* 语言按钮、Learn More 描边蓝色 */
}

/* 导航栏从左侧 main 中移出后，覆盖整页左右两栏。 */
.site-header {
  position: absolute;
  left: var(--header-offset);
  right: var(--header-offset);
  top: var(--header-offset);
  z-index: 30;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  box-shadow: 0 16px 40px rgba(76, 121, 158, .14), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.main-panel,
.house-panel {
  padding-top: calc(var(--header-height) + var(--header-offset) * 2 + 18px);
}
.main-panel {
  padding-top: calc(var(--header-height) + var(--header-offset) * 2 + 18px + var(--main-content-spacing-extra));
  padding-right: calc(46px + var(--main-content-spacing-extra));
  padding-bottom: calc(28px + var(--main-content-spacing-extra));
  padding-left: calc(46px + var(--main-content-spacing-extra));
}
.house-panel { padding-left: 0; padding-right: 0; }

.brand { white-space: nowrap; }
.desktop-nav { justify-content: center; align-items: center; }
.header-actions { justify-content: flex-end; min-width: 0; }

.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(150px, 14vw, 240px);
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid rgba(72,199,238,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: var(--accent-blue);
}
.search-form span { font-size: 22px; line-height: 1; transform: translateY(-1px); }
.search-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.search-form input::placeholder { color: rgba(47,36,28,.48); }
.search-feedback {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 8px);
  z-index: 4;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(76, 121, 158, 0.14);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.search-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.outline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Language / Rooms 按钮缩小位置：高度和左右内边距各减少 10px。 */
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--accent-blue);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: var(--accent-blue);
  font-size: clamp(18px, 1.45vw, 28px);
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
}
.outline-pill:hover { background: rgba(255,255,255,.82); }

.language-menu { position: relative; }
.language-button { min-width: 200px; } /* Language 按钮宽度减少 10px。 */
.language-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("../assets/icons/earth.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/icons/earth.svg") center / contain no-repeat;
}
.home-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("../assets/icons/home3.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/icons/home3.svg") center / contain no-repeat;
}
.language-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 100%;
  min-width: 200px;
  padding: 10px;
  border: 1.5px solid rgba(72,199,238,.42);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(76, 121, 158, .18);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.language-menu.open .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.language-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 16px;
  background: transparent;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.language-dropdown button:hover,
.language-dropdown button.active { background: rgba(72,199,238,.14); color: var(--accent-blue); }

/* 电脑端不显示 Learn More；保留结构，移动端可作为胶囊按钮显示。 */
.learn-more-link { display: none; }

/* TOP 主视觉轮播：稳定双容器布局，JS 更新数据。 */
.hero {
  min-height: 480px;
  display: block;
  padding: 0;
}
.dots { align-items: center; }
.dots button {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ded6c8;
  cursor: pointer;
}
.dots button.active { background: var(--green); }

/* 右侧房屋顶部仍在导航栏下方开始；若想让 roof 被导航栏半透明覆盖，可把 .house-panel 的 padding-top 改小。 */
.roof-image { width: var(--roof-display-width); }

@media (max-width: 1280px) {
  .site-header { gap: 14px; padding-inline: 16px; }
  .desktop-nav { gap: 14px; }
  .search-form { width: 160px; }
  .language-button { min-width: 160px; }
  .outline-pill {
    /* Language / Rooms 按钮缩小位置：窄屏下同样减少 10px。 */
    min-height: 42px;
    padding-inline: 10px;
    font-size: 18px;
  }
  .language-icon { width: 28px; height: 28px; }
}

@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 820px) {
  :root { --header-height: 72px; --header-offset: 12px; }
  .site-header {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 12px;
    grid-template-columns: auto 1fr;
    padding: 10px 12px;
  }
  .main-panel { padding-top: calc(var(--header-height) + 34px); padding-left: 18px; padding-right: 18px; }
  .house-panel { padding-top: 0; }
  .header-actions { gap: 8px; }
  .search-form { display: none; }
  .language-button {
    min-width: auto;
    min-height: 42px;
    padding-inline: 4px; /* Language 按钮移动端左右内边距减少 10px。 */
  }
  #currentLanguageLabel { display: none; }
  .learn-more-link { display: none; }
  .drawer-toggle {
    display: inline-flex;
    width: 38px;
    min-height: 38px;
    padding-inline: 6px; /* Rooms 按钮移动端高度与左右内边距减少 10px。 */
    font-size: 14px;
  }
  .hero { min-height: 620px; }
  .language-dropdown {
    right: 0;
    left: auto;
    width: 132px;
    min-width: 132px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border-radius: 18px;
  }
  .language-dropdown button {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
  }
  .home-icon { width: 22px; height: 22px; }
}


/* =========================
   v4 修改：导航品牌改为用户自行上传 icon，并让右侧房屋从顶部开始，导航栏真正覆盖在房屋上方。
   ========================= */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 58px;
  border-radius: 999px;
  overflow: hidden;
}
.brand-icon {
  width: 150px;              /* 品牌 icon 显示宽度，可按实际上传图片修改 */
  height: 50px;              /* 品牌 icon 显示高度，可按实际上传图片修改 */
  object-fit: contain;
  display: block;
}
.brand-icon:not([src]),
.brand-icon[src=""] {
  display: none;
}
.brand-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  border: 1.5px dashed rgba(72,199,238,.6);
  border-radius: 999px;
  color: var(--accent-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (min-width: 821px) {
  .house-panel {
    padding-top: 0;          /* 右侧房屋从顶部开始，导航栏以毛玻璃形式覆盖在 roof / 房间上方 */
  }
}

@media (max-width: 820px) {
  .brand { min-width: 92px; min-height: 48px; }
  .brand-icon, .brand-fallback { width: 110px; height: 40px; }
}

/* =========================
   v5 修改：TOP 主视觉容器改为纯色蓝底，移除草地弧形遮挡。
   功能：避免 hero 底部草地覆盖按钮、文字、图片占位区域。
   使用方法：如需恢复草地装饰，可删除本段 .hero::after 规则，或把 display:none 改为 display:block。
   ========================= */
.hero {
  background: var(--sky);    /* TOP 容器使用纯色蓝色背景，可在 :root 的 --sky 修改颜色 */
}
.hero::after {
  display: none;             /* 移除 TOP 容器内部草地，防止遮挡轮播内容 */
}

/* =========================
   v6 修改：TOP 主视觉容器仅保留纯色蓝色背景。
   功能：移除 hero 容器内部的云朵、圆点、草地等所有 CSS 装饰层，避免遮挡或干扰内容。
   使用方法：修改 :root 中的 --sky 即可更换 TOP 容器背景色；如需恢复装饰，请删除本段覆盖规则。
   ========================= */
.hero {
  background: var(--sky) !important;  /* TOP 主视觉容器纯色蓝色背景 */
}
.hero::before,
.hero::after {
  content: none !important;           /* 删除 TOP 容器内所有 CSS 伪元素装饰：云朵、圆点、草地 */
  display: none !important;
  background: none !important;
}

/* =========================
   v7 修改：手机端房间页全屏、home 图标按钮、返回导航与边缘右滑提示。
   ========================= */
@media (min-width: 821px) {
  .drawer-toggle {
    display: none !important;          /* 电脑端隐藏 Rooms 按钮 */
  }
}

@media (max-width: 820px) {
  .house-panel {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    transform: translateX(100%);
    background-color: var(--paper);
    box-shadow: none;
  }
  .house-panel.open { transform: translateX(0); }
  .drawer-mask.open { display: none; }

  .mobile-drawer-header {
    position: sticky;
    top: 12px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: calc(100% - 24px);
    min-height: var(--header-height);
    margin: 12px auto 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 16px 40px rgba(76, 121, 158, .14), inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
  }
  .mobile-room-logo {
    width: 110px;
    height: 40px;
    object-fit: contain;
    display: block;
  }
  .mobile-drawer-header .mobile-back-button {
    width: auto;
    height: auto;
    min-height: 42px;
    margin-left: auto;
    padding: 0 18px;
    border: 2px solid var(--accent-blue);
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    color: var(--accent-blue);
    gap: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
  }
}

/* =========================================================================
   v8 现代化优化 (Modern refinement layer)
   功能：统一品牌色、圆润字体、柔和卡片、合理留白、悬停微交互。
   ========================================================================= */
:root {
  /* 主色：品牌青绿（替代旧的橄榄绿按钮，与导航胶囊统一） */
  --accent: #12c0c9;
  --accent-strong: color-mix(in srgb, var(--accent) 74%, #06363a);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 9%, #ffffff);

  /* 让导航/搜索胶囊跟随主色 */
  --accent-blue: var(--accent);

  --main-content-spacing-extra: 44px; /* 新基线：更紧致现代 */

  /* 卡片系统 */
  --card-bg: rgba(255, 255, 255, 0.86);
  --card-border: 1px solid rgba(96, 124, 138, 0.12);
  --card-shadow: 0 10px 30px rgba(78, 108, 130, 0.08);
  --card-shadow-hover: 0 20px 46px rgba(78, 108, 130, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— 字号与字距：圆润字体下放松过紧的负字距 —— */
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.01em; }
.brand { letter-spacing: -0.04em; }

/* —— 主按钮：去除拟物高光，统一品牌色 + 柔和阴影 + 悬停微动 —— */
.primary-button {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), filter 0.2s var(--ease);
}
.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 36%, transparent);
  filter: none;
}
.primary-button:active { transform: translateY(0); }

.contact-jump-button {
  transition: transform 0.22s var(--ease), filter 0.2s var(--ease);
}

.contact-jump-button:hover {
  transform: translateY(-2px);
}

.contact-jump-button:active { transform: translateY(0); }

/* —— 次级链接 / 标题装饰统一跟随主色 —— */
.eyebrow { color: var(--accent-strong); }
.leaf,
.view-all { color: var(--accent-strong); }
.text-link { color: var(--accent-strong); transition: color 0.2s var(--ease); }
.desktop-nav a { transition: color 0.18s var(--ease); }
.desktop-nav a:hover,
.view-all:hover,
.text-link:hover { color: var(--accent); }

/* —— 搜索框 / 胶囊描边跟随主色 —— */
.search-form { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.search-form { color: var(--accent-strong); }

/* —— 区块标题：更现代的层级 —— */
.section-heading h2 { font-size: 26px; font-weight: 800; }

/* —— 卡片：柔和阴影 + 一致圆角 + 悬停抬升 —— */
.feature-card,
.news-card,
.goods-card,
.notice-list article {
  border: var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.2s var(--ease);
}
.feature-card:hover,
.news-card:hover,
.goods-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}
.notice-list article:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: var(--card-shadow-hover);
}

/* —— 媒体占位/图片圆角 —— */
.news-image { border-radius: 16px; }
.goods-image { border-radius: 18px; }

/* —— 轮播控件现代化 —— */
.dots button.active,
.dots .active { background: var(--accent); }
.arrows button {
  background: var(--accent-soft);
  color: var(--accent-strong);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.arrows button:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }

/* —— 页脚社交按钮 hover —— */

/* —— Hero 背景 —— */
.hero { background: var(--sky) !important; }

/* —— TOP 浮动按钮跟随主色 —— */
.floating-top-button { color: var(--accent-strong); }
.floating-top-button:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; }
}

/* =========================================================================
   v9 — TOP 主视觉重新设计
   功能：
   - 左侧文字区使用纯主题色背景。
   - 右侧图片独立占位，与文字区清晰分割且不互相重叠。
   - 文字、面板、字号全部用 clamp()，随浏览器尺寸自动缩放。
   - 移动端：文字在上、图片在下（grid 行布局）。
   ========================================================================= */
.hero {
  min-height: clamp(420px, 44vw, 560px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--sky);
}
.hero-img {
  position: relative;
  grid-column: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: clamp(26px, 4vw, 60px) clamp(22px, 3.2vw, 52px);
  background: var(--sky);
  color: var(--ink);
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.65));
}
.hero-copy .eyebrow {
  color: var(--accent-strong);
  opacity: 0.85;
  font-size: clamp(14px, 1.25vw, 22px);
  margin: 0;
}
.hero-copy h1 {
  color: var(--ink);
  margin: clamp(8px, 1vw, 16px) 0 clamp(10px, 1.1vw, 18px);
  font-size: clamp(30px, 4vw, 62px);
  line-height: 0.98;
}
.hero-copy p {
  color: var(--muted);
  opacity: 0.92;
  max-width: 34ch;
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.65;
}
.hero-copy .hero-actions { margin-top: clamp(16px, 2vw, 32px); }
.hero-copy .text-link { color: var(--accent-strong); opacity: 0.82; }
.hero-copy .text-link:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────────────────────
   移动端 Hero：图片上 / 文字下，自动适配所有设备
   核心设计：
   · slide → position:relative，hero 高度由内容撑开，不写死 px
   · hero-img → aspect-ratio 按屏宽自动推算高度（任何手机/平板均适配）
   · 非 active slide → display:none，active 时淡入（替代原 opacity 过渡）
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* hero 容器：高度完全由内容撑开 */
  .hero {
    min-height: unset !important;
    height: auto !important;
  }

  /* 所有 slide 脱离绝对堆叠，切换靠 display 控制 */

  /* 当前显示的 slide 展开，加淡入动画 */
  @keyframes heroMobileFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* 图片：aspect-ratio 按屏宽自动定高，无需写死任何 px */
  .hero-img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: unset !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;        /* 可改为 4/3 或 3/2，取决于图片实际比例 */
    max-height: 60vw;            /* 宽屏手机/平板时防止图片过高 */
    object-fit: cover;
    object-position: center 60%; /* 向下偏移，显示图片下方内容 */
    place-self: unset !important;
    background: none !important;
  }

  /* 文字区：居中，自动高度 */
  .hero-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 24px 26px !important;
    border-right: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.65));
  }
  .hero-copy .eyebrow  { font-size: clamp(10px, 2.8vw, 13px) !important; }
  .hero-copy h1        { font-size: clamp(20px, 5.5vw, 28px) !important; margin: 4px 0 8px !important; }
  .hero-copy p         { font-size: clamp(11px, 2.8vw, 13px) !important; line-height: 1.5 !important; max-width: 28ch; }
  .hero-copy .hero-actions    { justify-content: center; margin-top: 14px; }
  .hero-copy .primary-button  { padding: 10px 20px !important; font-size: clamp(12px, 3vw, 14px) !important; }
}

/* 移动端滚动修复：锁住外层页面，避免内容结束后继续拉出无限空白。 */
@media (max-width: 820px) {
  body::before {
    content: none;
  }

  :root {
    --mobile-nav-top: 30px; /* 手机端导航栏距离画面顶部；改这里即可整体下移/上移 */
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .app-shell {
    height: 100dvh;
    overflow: hidden;
  }
  .main-panel {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .house-panel {
    padding-bottom: 0;
  }
  .app-shell::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
	    background-image:
	      url("../assets/backgrounds/cloud-top.svg"),
	      url("../assets/backgrounds/cloud-1.svg"),
	      url("../assets/backgrounds/cloud-2.svg"),
	      url("../assets/backgrounds/cloud-3.svg"),
	      url("../assets/backgrounds/cloud-4.svg"),
	      url("../assets/backgrounds/hill.svg");
    background-repeat: no-repeat;
	    background-position:
	      center top,
	      -8% 10%,
	      92% 13%,
	      -12% 42%,
	      96% 54%,
	      center bottom;
	    background-size:
	      680px auto,
	      150px auto,
	      118px auto,
	      170px auto,
	      145px auto,
	      720px auto;
    opacity: .72;
  }
  .house-panel::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      url("../assets/backgrounds/cloud-1.svg"),
      url("../assets/backgrounds/cloud-2.svg"),
      url("../assets/backgrounds/cloud-3.svg"),
      url("../assets/backgrounds/cloud-4.svg");
    background-repeat: no-repeat;
    background-position:
      -8% 10%,
      92% 13%,
      -12% 42%,
      96% 54%;
    background-size:
      150px auto,
      118px auto,
      170px auto,
      145px auto;
    opacity: .72;
  }
}

/* =========================================================================
   v10 — iPhone / touch viewport fixes
   - Keep mobile grass anchored to the visible screen bottom.
   - Give the fixed glass header enough safe-area clearance so it does not cover Hero.
   - Paper plane stays decorative on phones/tablets and never intercepts taps.
   ========================================================================= */
@media (max-width: 1024px), (pointer: coarse) {
  .paper-plane-stage,
  .paper-plane,
  .plane-trail-canvas {
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  .app-shell {
    height: 100svh;
  }

  .main-panel {
    height: 100svh;
    padding-top: calc(var(--header-height) + 46px + var(--mobile-safe-top));
    padding-bottom: calc(40px + var(--mobile-safe-bottom));
  }

  .site-header {
    top: calc(12px + var(--mobile-safe-top));
  }

  .app-shell::before {
    position: fixed;
    inset: 0;
	    background-position:
	      center top,
	      -8% 10%,
	      92% 13%,
	      -12% 42%,
	      96% 54%,
	      center calc(100% + 1px);
	    background-size:
	      680px auto,
	      150px auto,
	      118px auto,
	      170px auto,
	      145px auto,
      max(760px, 115vw) auto;
  }
}

/* =========================================================================
   Rebuilt Hero Carousel
   结构：
   - .hero 是轮播舞台 / 大容器。
   - .hero-slide 是每一张大容器，后续可继续添加。
   - .hero-copy 和 .hero-img 是内部两个紧贴小容器。
   尺寸：
   - 桌面端：hero 760x480，文字 280x480，图片 480x480。
   - 手机端：hero 340x540，图片 340x340，文字 340x200。
   ========================================================================= */
.news-card,
.goods-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-card:focus-visible,
.goods-card:focus-visible,
.view-all:focus-visible,
.contact-jump-button:focus-visible,
.primary-button:focus-visible,
.outline-pill:focus-visible,
.arrows button:focus-visible,
.dots button:focus-visible {
  outline: 3px solid rgba(1, 206, 202, 0.42);
  outline-offset: 4px;
}

.hero {
  position: relative !important;
  display: block !important;
  width: var(--main-fixed-content-width) !important;
  height: 480px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-xl);
  background: var(--sky);
}

.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 280px 480px !important;
  grid-template-rows: 480px !important;
  width: var(--main-fixed-content-width) !important;
  height: 480px !important;
  padding: 0 !important;
  gap: 0 !important;
  opacity: 0;
  transform: translateX(54px);
  pointer-events: none;
  transition: opacity .52s ease, transform .52s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 2;
  width: 280px !important;
  height: 480px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: flex-start;
  gap: 6px;
  padding: 0 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  text-align: left;
}

.hero-copy-glass-img {
  position: absolute;
  inset: -28%;
  z-index: 0;
  width: 156%;
  height: 156%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: blur(12px) saturate(1.22);
  transform: scale(3);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

.hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  box-shadow: inset -1px 0 rgba(255,255,255,.42);
  pointer-events: none;
}

.hero-copy > :not(.hero-copy-glass-img) {
  position: relative;
  z-index: 2;
}

.hero-img {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 1;
  display: block !important;
  width: 480px !important;
  height: 480px !important;
  min-width: 480px !important;
  min-height: 480px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: var(--sky);
}

.hero,
.slider-controls,
.content-section,
.contact-jump-section,
.site-footer {
  margin-left: auto !important;
  margin-right: auto !important;
}

.slider-controls,
.content-section,
.contact-jump-section,
.site-footer {
  width: var(--main-fixed-content-width) !important;
}

.slider-controls {
  margin-top: 22px !important;
  margin-bottom: 120px !important;
}

.content-section {
  margin-top: 0 !important;
  margin-bottom: 120px !important;
}

.contact-jump-section {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

@media (max-width: 820px) {
  .hero {
    width: var(--mobile-fixed-content-width) !important;
    height: 540px !important;
    margin-inline: auto;
    border-radius: 24px;
  }

  .hero-slide {
    grid-template-columns: 340px !important;
    grid-template-rows: 340px 200px !important;
    width: var(--mobile-fixed-content-width) !important;
    height: 540px !important;
    transform: translateX(40px);
  }

  .hero-slide.active {
    transform: translateX(0);
  }

  .hero-img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 340px !important;
    height: 340px !important;
    min-width: 340px !important;
    min-height: 340px !important;
    object-fit: cover !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .hero-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 340px !important;
    height: 200px !important;
    align-items: center;
    justify-content: center !important;
    padding: 18px 24px 22px !important;
    border-radius: 0 0 24px 24px !important;
    text-align: center;
  }

  .hero-copy-glass-img {
    inset: -34%;
    width: 168%;
    height: 168%;
  }

  .hero-copy::after {
    box-shadow: inset 0 1px rgba(255,255,255,.5);
  }

  .slider-controls,
  .content-section,
  .contact-jump-section,
  .site-footer {
    width: var(--mobile-fixed-content-width) !important;
  }

  .slider-controls {
    justify-content: center !important;
    gap: 0 !important;
  }

  .slider-controls .arrows {
    display: none !important;
  }

  .slider-controls .dots {
    justify-content: center !important;
  }
}

/* =========================================================================
   Mobile viewport / browser chrome reset
   - Body scrolls again, so mobile browser address bars can collapse normally.
   - viewport-fit=cover lets iOS paint into status-bar / bottom-bar areas.
   - Safe-area offsets are not added to the header or hero clearance here.
   ========================================================================= */
@media (max-width: 820px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    min-height: 100dvh !important;
  }

  .app-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .main-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin-left: 0 !important;
    overflow: visible !important;
    padding-top: calc(var(--header-height) + var(--mobile-nav-top) + 46px) !important;
    padding-bottom: 40px !important;
    transform: none !important;
  }

  .site-header {
    top: var(--mobile-nav-top) !important;
  }

  .floating-top-button {
    position: fixed !important;
    right: 18px !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 120 !important;
  }
}

@media (min-width: 821px) {
  .app-shell,
  .house-panel {
    overflow: visible !important;
  }
}

@media (max-width: 820px) {
  .house-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* =========================================================================
   v11 — Stability and tooling cleanup
   - Tweaks now runs as a normal Vite module instead of runtime Babel/React.
   - The app shell clips decorative horizontal overflow while preserving the
     independently scrolling panels.
   - Controls get consistent focus, disabled, hover, and reduced-motion states.
   ========================================================================= */
.app-shell {
  max-width: calc(100vw - 28px);
}

.search-form {
  position: relative;
}

.hero-copy h1,
.hero-copy p,
.section-heading h2,
.news-card h3,
.goods-card h3,
.notice-list p,
.primary-button,
.contact-jump-button {
  text-wrap: pretty;
}

.dots button {
  transition: transform .18s var(--ease), background .18s var(--ease);
}

.dots button:hover,
.dots button.active {
  transform: scale(1.12);
}

@media (max-width: 820px) {
  .app-shell {
    max-width: 100vw;
  }

  .contact-jump-button {
    min-width: 240px;
    min-height: 58px;
    padding: 7px 28px 7px 18px;
    gap: 14px;
    font-size: 20px;
  }

  .contact-jump-icon {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .dots button,
  .search-feedback {
    transition-duration: 0.001ms !important;
  }
}

/* Hero slide text overrides: edit these values to tune each JS line 24-29 separately. */
[data-i18n^="hero.slide"] {
  white-space: pre-line;
}

[data-i18n="hero.slide1.title"] {
  font-size: 38px !important;
  line-height: 1.08 !important;
}

[data-i18n="hero.slide1.text"] {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

[data-i18n="hero.slide2.title"] {
  font-size: 38px !important;
  line-height: 1.08 !important;
}

[data-i18n="hero.slide2.text"] {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

[data-i18n="hero.slide3.title"] {
  font-size: 38px !important;
  line-height: 1.08 !important;
}

[data-i18n="hero.slide3.text"] {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

@media (max-width: 820px) {
  [data-i18n="hero.slide1.title"],
  [data-i18n="hero.slide2.title"],
  [data-i18n="hero.slide3.title"] {
    width: 100% !important;
    max-width: none !important;
    font-size: 100px !important;
    line-height: 1.08 !important;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  [data-i18n="hero.slide1.text"],
  [data-i18n="hero.slide2.text"],
  [data-i18n="hero.slide3.text"] {
    width: 100% !important;
    max-width: none !important;
    font-size: 80px !important;
    line-height: 1.5 !important;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* Language switcher text size. */
#currentLanguageLabel {
  font-size: 18px !important;
}

.language-dropdown button {
  font-size: 18px !important;
}

@media (max-width: 820px) {
  #currentLanguageLabel {
    font-size: 12px !important;
  }

  .language-dropdown button {
    font-size: 12px !important;
  }
}

/* Privacy policy page. */
.privacy-page {
  min-height: 100vh;
}

.privacy-page .privacy-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(1480px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 48px;
}

.privacy-page .privacy-header {
  top: 14px;
}

.privacy-main {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: clamp(64px, 8vw, 120px) clamp(18px, 4vw, 56px);
}

.privacy-card {
  width: min(900px, 100%);
  padding: clamp(30px, 4.8vw, 58px);
  border: 1.5px solid rgba(72,199,238,.32);
  border-radius: 32px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 24px 60px rgba(76, 121, 158, .14);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  text-align: center;
}

.privacy-eyebrow {
  margin: 0 0 12px;
  color: var(--accent-blue);
  font-weight: 900;
}

.privacy-card h1 {
  margin: 0 0 clamp(24px, 4vw, 38px);
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  font-weight: 900;
}

.privacy-content {
  display: grid;
  gap: clamp(34px, 4vw, 52px);
  color: var(--muted);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.85;
  text-align: left;
}

.privacy-section {
  display: grid;
  gap: 22px;
}

.privacy-section h2 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(72,199,238,.28);
  color: var(--accent-blue);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.privacy-item {
  display: grid;
  gap: 9px;
}

.privacy-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: 0;
}

.privacy-content p {
  margin: 0;
}

.privacy-content strong {
  color: var(--ink);
  font-weight: 900;
}

.privacy-note {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(138, 240, 238, .22);
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: .94em;
}

@media (max-width: 820px) {
  body.privacy-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      url("../assets/backgrounds/cloud-top.svg"),
      url("../assets/backgrounds/cloud-1.svg"),
      url("../assets/backgrounds/cloud-2.svg"),
      url("../assets/backgrounds/cloud-3.svg"),
      url("../assets/backgrounds/cloud-4.svg"),
      url("../assets/backgrounds/hill.svg");
    background-repeat: no-repeat;
    background-position:
      center top,
      -8% 10%,
      92% 13%,
      -12% 42%,
      96% 54%,
      center calc(100% + 1px);
    background-size:
      680px auto,
      150px auto,
      118px auto,
      170px auto,
      145px auto,
      max(760px, 115vw) auto;
    opacity: .72;
  }

  .privacy-page .privacy-shell {
    width: 100%;
    padding: 0 0 36px;
  }

  .privacy-page .privacy-header {
    top: var(--mobile-nav-top) !important;
  }

  .privacy-main {
    min-height: 100svh;
    padding: calc(var(--header-height) + var(--mobile-nav-top) + 80px) 18px 56px;
  }

  .privacy-card {
    border-radius: 24px;
    text-align: center;
  }

  .privacy-content {
    font-size: 14px;
    line-height: 1.8;
  }

  .privacy-section h2 {
    font-size: 22px;
  }

  .privacy-item h3 {
    font-size: 16px;
  }
}