/* ==========================================================================
   OriEast — replica layer
   Loaded AFTER orieast.css (the site's own compiled stylesheet).
   Keep this file small: only what the static replica needs beyond the原站样式.
   Anything you change here is "改版" territory — orieast.css stays untouched.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* 原站 body 是 #171717 冷黑 + 纯白底。冷黑压在纸绿上会发灰发脏，
   所以连 body 一起换：墨字 + 纸底，和国内三端一致。 */
body {
  color: var(--gp-ink);
  background-color: var(--gp-paper);
}

/* ==========================================================================
   YuAn Pro — Green-paper palette (single track)
   --------------------------------------------------------------------------
   本站配色与国内三端完全共用同一套纸绿，不再单独成轨。
   真身 = Claw/client-h5/tokens.css：
     纸底 #F0F8F1 / 纸二 #E3EFE5 / 纸三 #D5E7D8 / 描边 #C5D2C7
     墨绿 #33724C / 金 #E9BC5F / 墨字 #222C24
   所以下面这些变量名只是本地的短名，值一律照抄母版，不做「海外提亮」。
   改色时请改母版再同步过来，别在这里单独调——这正是上一轮 T1.1 令牌漂移的成因。

   深色 hero 的结构保留（135° 三段渐变 + white/10 毛玻璃卡），但色相从藏青改深墨绿：
     原 #1E3A5F（H214 藏青）→ #1F3A2B（H145 墨绿）
     它是「纸绿体系里的深色面」，不是第二个品牌色，也不是蓝。别拿它做按钮。
   --------------------------------------------------------------------------
   覆写的是原站自己的 Tailwind 主题变量，整站一处生效；带透明度的变体
   （bg-orieast-teal/8 等）在原站已用 color-mix(var(--color-orieast-teal)) 表达，
   会跟着变量自动派生，不需要逐类重写。
   ========================================================================== */
:root {
  /* ── Surface / neutral（= 母版 paper 系） ─────────────── */
  --gp-paper:       #F0F8F1;
  --gp-paper-2:     #E3EFE5;
  --gp-paper-3:     #D5E7D8;
  --gp-line:        #C5D2C7;
  --gp-line-soft:   #DCE7DE;
  --gp-card:        #FFFFFF; /* 真浮起的卡片（弹窗/抽屉）才配纯白，和纸底拉开层次 */

  /* ── Ink（= 母版 ink 系） ───────────────────────────── */
  --gp-ink:         #222C24;
  --gp-ink-soft:    #4E594F;
  --gp-ink-faint:   #5B655B;

  /* ── Accent ─────────────────────────────────────────── */
  --gp-accent:       #33724C; /* 白字压底 5.75:1；纸底上做字 5.31:1 */
  --gp-accent-hover: #1B683E;
  --gp-accent-soft:  #A9D0B0;
  --gp-accent-ink:   #212C25; /* 浅绿底上的深字 */

  /* ── Gold ───────────────────────────────────────────── */
  --gp-gold:      #E9BC5F; /* 装饰用：描边、圆点、深底上的金字 */
  --gp-gold-ink:  #96621A; /* 文字用：浅底上的金字。纸绿 4.78:1 达 AA，H35 S70 仍是金，只是压深 */
  --gp-gold-deep: #CD9130;

  /* ── 深色面（纸绿体系里的墨绿，不是藏青） ─────────────── */
  --gp-deep:       #1F3A2B; /* 白字 12.36:1 · 金 6.96:1 */
  --gp-deep-mid:   #1A3125;
  --gp-deep-end:   #14241B;
  --gp-deep-rgb:   31, 58, 43;
  --gp-scrim-rgb:  20, 36, 27; /* 抽屉/弹窗遮罩 */

  /* 深色面上绿只能当「字/图标」用，且必须提亮到 #8CCAA5（对 #1F3A2B 为 7.2:1）。
     主色 #33724C 压在深色面上只有 2.15:1，当文字会读不清，当按钮会糊进背景。 */
  --gp-accent-on-deep: #8CCAA5;

  /* 深色面上的浅色阶：原站用的是 Tailwind 冷灰（slate-200/300/400），
     冷灰压在墨绿上会发脏，换成同明度的纸绿白。
     明度对齐原值，所以对比度只升不降。 */
  --gp-on-deep:       #E3EFE5; /* ≈ slate-200 · 对深绿 11.2:1 */
  --gp-on-deep-soft:  #C9D6CC; /* ≈ slate-300 · 9.3:1 */
  --gp-on-deep-faint: #A8B8AC; /* ≈ slate-400 · 6.4:1 */

  /* ── 覆写原站主题变量 ───────────────────────────────── */
  --color-orieast-teal: var(--gp-accent);
  --color-orieast-blue: var(--gp-deep);
  --color-orieast-gold: var(--gp-gold);

  /* 原站零散用的 Tailwind 默认 teal 阶梯（hover/浅底/链接），一并拉回纸绿 */
  --color-teal-50:  #E8F3EB;
  --color-teal-100: #D5E7D8;
  --color-teal-600: var(--gp-accent-hover);
  --color-teal-700: #175B3A;
  --color-teal-800: #124A30;
}

/* 深色面里的绿当字用：提亮，否则读不清 */
.oe-hero-bg .text-orieast-teal { color: var(--gp-accent-on-deep); }

/* 纸三（#D5E7D8）是最深的一档纸，主色 #33724C 压上去只有 4.45:1，差一点点。
   凡落在纸三上的绿字降一档到 accent-hover（母版已有色，不新增令牌），约 5.9:1。
   case-evaluation 的 "Personal Info" 步骤标签就是这一档。 */
.bg-slate-100 .text-orieast-teal { color: var(--gp-accent-hover); }

/* 金当文字用：浅底必须压深。
   亮金 #E9BC5F 压在纸绿上只有 1.64:1——服务页的 01–08 序号、金色徽章全部读不出来。
   母版对此早有约定：warn-line #CD9130 只做装饰，做文字用 warn #8A5A12。
   这里同构：装饰留 --gp-gold，文字用 --gp-gold-ink。
   深色面（hero 与 footer）要反回来用亮金，亮金在那里的对比是 6.96:1。 */
.text-orieast-gold { color: var(--gp-gold-ink); }
.oe-hero-bg .text-orieast-gold,
.bg-orieast-blue .text-orieast-gold { color: var(--gp-gold); }

/* 标题里的金色短语必须整块换行。
   中文「为您一站安排」、日文「ひとつの窓口で」在 1440px 下会被断成
   「ひと／つの窓口で」——日文在词中间断行，是硬缺陷，不是风格问题。
   inline-block 让这一截整体挪到下一行；块级化后它自己就是一行，不再被拆。
   只限定 h1 的直接子元素：text-orieast-gold 在别处还用作小标签和序号，
   那些地方必须能跟着父元素自然换行。 */
h1 > .text-orieast-gold { display: inline-block; }

/* 深色面上的冷灰 → 纸绿白。
   原站 hero / footer 的副标题和统计标签用的是 Tailwind 冷灰（slate-200/300/400），
   冷灰压在墨绿上会发灰发脏，像蒙了一层雾。换成同明度的纸绿白，明度对齐原值，
   对比度只升不降。注意只限定在深色容器内——同样的类在浅底上另有语义（见下）。 */
.oe-hero-bg .text-slate-200,
.oe-hero-bg .text-slate-200\/90,
.bg-orieast-blue .text-slate-200,
.bg-orieast-blue .text-slate-200\/90 { color: var(--gp-on-deep); }

.oe-hero-bg .text-slate-300,
.bg-orieast-blue .text-slate-300 { color: var(--gp-on-deep-soft); }

.oe-hero-bg .text-slate-400,
.bg-orieast-blue .text-slate-400 { color: var(--gp-on-deep-faint); }

/* 浅底上残留的 slate-300 只有一处：信任条里的「|」分隔符。
   浅冷灰压在纸绿上对比 1.5:1，等于看不见；改用描边色，让它退回装饰的位置。 */
.text-slate-300 { color: var(--gp-line); }

/* 深色面里的主按钮：底色保持母版绿 #33724C，加一圈金色内描边把它从深绿底上
   分离出来（底色对深色面仅 2.15:1，没有这圈边按钮会糊）。白字 5.75:1 达标。 */
.oe-hero-bg .bg-orieast-teal,
.oe-hero-bg .bg-orieast-teal\/90 {
  background-color: var(--gp-accent);
  box-shadow: inset 0 0 0 1px rgba(233, 188, 95, 0.5);
}
.oe-hero-bg .bg-orieast-teal:hover,
.oe-hero-bg .bg-orieast-teal\/90:hover { background-color: var(--gp-accent-hover); }

/* 输入框统一走到纸上色系。原站 placeholder 是 slate-400，在白底上就偏淡，
   换到纸绿底后更弱；直接用辅助文字色，和国内三端的表单一致。 */
input::placeholder,
textarea::placeholder { color: var(--gp-ink-faint); opacity: 1; }

/* ==========================================================================
   基础面：把原站的「白 + 冷灰」整体换成纸绿
   --------------------------------------------------------------------------
   原站的所有颜色都走 Tailwind 变量（.bg-white{background-color:var(--color-white)}），
   理论上改 --color-white 就能一次生效。但 --color-white 同时被 text-white 引用
   （277 处，全在深色面和绿按钮上），改了会把白字染成绿字。
   所以这里按「类」覆写背景面，文字色单独按明度分档处理。
   ========================================================================== */

/* 底色 */
.bg-white        { background-color: var(--gp-paper); }
.bg-slate-50     { background-color: var(--gp-paper-2); }
.bg-slate-100    { background-color: var(--gp-paper-3); }
.bg-slate-200    { background-color: var(--gp-line); }
.bg-white\/95    { background-color: rgba(240, 248, 241, 0.95); }
.bg-slate-50\/50 { background-color: rgba(227, 239, 229, 0.5); }

/* hover 面（90 处） */
.hover\:bg-slate-50:hover  { background-color: var(--gp-paper-2); }
.hover\:bg-slate-100:hover { background-color: var(--gp-paper-3); }

/* 描边 */
.border-slate-200 { border-color: var(--gp-line); }
.border-slate-100 { border-color: var(--gp-line-soft); }
.border-slate-300 { border-color: #B8C8BB; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gp-line-soft); }

/* 正文色：只改浅底上那几档深灰。
   注意 text-slate-200/300/400 一律不动——它们几乎全在深色 hero 里当浅色字用，
   改深就等于把 hero 的副标题抹掉。 */
.text-slate-900 { color: #16201A; }
.text-slate-800 { color: var(--gp-ink); }
.text-slate-700 { color: var(--gp-ink); }
.text-slate-600 { color: var(--gp-ink-soft); }
.text-slate-500 { color: var(--gp-ink-faint); }

/* 原站有一处 hover 金写成任意值类，绕过了主题变量 */
.hover\:bg-\[\#f0c861\]:hover { background-color: var(--gp-gold-deep); }

/* The bundled stylesheet references this pattern as url(/grid.svg), which is a
   filesystem-root path — it breaks under file:// and inside /zh and /ja.
   Re-point it relative to this stylesheet so it resolves in every language. */
.bg-\[url\(\'\/grid\.svg\'\)\] {
  background-image: url(../../grid.svg);
}

/* ---------------------------------------------------------------- mobile nav
   The original renders its drawer client-side; we recreate it here so the
   replica behaves like the real site when you resize the browser. */
.oe-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.oe-drawer.is-open {
  display: block;
}
.oe-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--gp-scrim-rgb), 0.45);
}
.oe-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82%;
  max-width: 340px;
  background: var(--gp-paper);
  border-left: 1px solid var(--gp-line);
  box-shadow: -16px 0 40px rgba(var(--gp-scrim-rgb), 0.28);
  display: flex;
  flex-direction: column;
  padding: 20px 22px 32px;
  overflow-y: auto;
}
.oe-drawer__close {
  align-self: flex-end;
  padding: 6px;
  color: var(--gp-ink-soft);
  line-height: 0;
}
.oe-drawer__link {
  display: block;
  padding: 14px 2px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gp-ink);
  border-bottom: 1px solid var(--gp-line-soft);
}
.oe-drawer__link:hover {
  color: var(--gp-accent);
}
.oe-drawer__lang {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.oe-drawer__lang a {
  padding: 6px 14px;
  font-size: 0.875rem;
  border-radius: 6px;
  background: var(--gp-paper-3);
  color: var(--gp-ink-soft);
}
.oe-drawer__lang a.is-active {
  background: var(--gp-accent);
  color: #FFFFFF;
}
.oe-drawer__cta {
  margin-top: 22px;
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 8px;
  background: var(--gp-accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* ------------------------------------------------------------------- modal
   The original serves this lead-capture dialog from client JS only, so it is
   absent from the static HTML. Rebuilt here 1:1 (copy + layout) and gated by
   window.ORIEAST_POPUP so you can switch it off while redesigning. */
.oe-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--gp-scrim-rgb), 0.55);
  backdrop-filter: blur(3px);
}
.oe-modal.is-open {
  display: flex;
}
.oe-modal__card {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--gp-card);
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 32px 80px rgba(var(--gp-scrim-rgb), 0.32);
}
@media (min-width: 768px) {
  .oe-modal__card {
    grid-template-columns: 300px 1fr;
  }
}
.oe-modal__aside {
  background: linear-gradient(135deg, var(--gp-deep) 0%, var(--gp-deep-mid) 55%, var(--gp-deep-end) 100%);
  color: #FFFFFF;
  padding: 32px 26px;
}
.oe-modal__badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid rgba(233, 188, 95, 0.40);
  background: rgba(233, 188, 95, 0.14);
  color: var(--gp-gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.oe-modal__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 14px;
}
.oe-modal__lede {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gp-line-soft);
  margin-bottom: 22px;
}
.oe-modal__proof {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gp-line-soft);
}
.oe-modal__proof svg {
  flex: none;
  color: var(--gp-accent-on-deep);
  margin-top: 2px;
}
.oe-modal__form {
  padding: 32px 30px;
}
.oe-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gp-card);
  border: 1px solid var(--gp-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gp-ink-soft);
  z-index: 2;
}
.oe-modal__form h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gp-ink);
  margin-bottom: 6px;
}
.oe-modal__form .oe-modal__hint {
  font-size: 0.8125rem;
  color: var(--gp-ink-faint);
  margin-bottom: 18px;
}
.oe-modal__form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gp-ink-soft);
  margin-bottom: 6px;
}
.oe-modal__form input,
.oe-modal__form select {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--gp-line);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--gp-ink);
  background: var(--gp-card);
}
.oe-modal__form input:focus,
.oe-modal__form select:focus {
  outline: none;
  border-color: var(--gp-accent);
  box-shadow: 0 0 0 3px rgba(51, 114, 76, 0.18);
}
.oe-modal__submit {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  background: var(--gp-accent);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9375rem;
}
.oe-modal__submit:hover {
  background: var(--gp-accent-hover);
}
.oe-modal__fine {
  margin-top: 12px;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--gp-ink-faint);
  text-align: center;
}
.oe-modal__later {
  display: block;
  margin: 10px auto 0;
  font-size: 0.8125rem;
  color: var(--gp-ink-faint);
}

body.oe-scroll-lock {
  overflow: hidden;
}

/* ==========================================================================
   配色统一层
   Tailwind 只输出用到的类，任意值（如 /92）可能没被编译。
   这里把品牌色的关键用法收敛成明确的类，避免依赖编译产物。
   ========================================================================== */

/* 深色区块统一底色：与首页 hero 同一套藏青渐变 */
.oe-hero-bg {
  /* 结构不变：135° 三段渐变。只把色相从原站的 teal 系藏青换成降饱和后的深色面。 */
  background-image: linear-gradient(
    135deg,
    var(--gp-deep) 0%,
    var(--gp-deep-mid) 55%,
    var(--gp-deep-end) 100%
  );
}

/* 图片上的文字遮罩：保证白字在亮色照片上依然可读 */
.oe-img-scrim {
  background-image: linear-gradient(
    to top,
    rgba(var(--gp-deep-rgb), 0.92) 0%,
    rgba(var(--gp-deep-rgb), 0.62) 35%,
    rgba(var(--gp-deep-rgb), 0.18) 70%,
    rgba(var(--gp-deep-rgb), 0) 100%
  );
}

/* ── 四语导航：1024px 以下收进抽屉，避免第四种语言把导航挤爆 ─────────── */
.oe-nav-links,
.oe-nav-lang {
  display: none;
}

.oe-nav-burger {
  display: block;
}

@media (min-width: 1024px) {
  .oe-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .oe-nav-lang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .oe-nav-burger {
    display: none;
  }
}

@media (min-width: 1280px) {
  .oe-nav-links {
    gap: 2rem;
  }
}

/* ------------------------------------------------------------------
   Utility gaps missing from the precompiled Tailwind bundle.
   The site ships a compiled subset (no JIT), so a few spacing classes
   referenced in markup were never generated. Defined here to match
   Tailwind's canonical values.
   ------------------------------------------------------------------ */
.mt-1\.5 { margin-top: 0.375rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.space-y-12 > * + * { margin-top: 3rem; }

/* Sidebar layout: the "quick read" card must hug its own content instead of
   stretching to match the taller sidebar column next to it. */
.oe-hug { align-self: start; }

/* Expert cards: avoid a single short word ("一。", "を担う。") on the last line. */
.oe-expert-blurb { text-wrap: pretty; }