/* ==========================================================================
   S17 站点皮肤 · 令牌语义重映射层（必须在 modules.css 之后加载）
   依据：01_站点身份与占位符/site-identity.json + 第三包S17 文档
     · 语言 ja-JP ｜ 行業 法務・移民・金融・IT ｜ 東京都
     · 主题色 brand_color #1d4ed8（blue-600）→ 组件库 --navy-* 同位重映射
     · 强调色 accent_color #0ea5e9（sky-500）：组件库 --gold-* 同位重映射
       —— 对比度修正（WCAG AA 优先于照抄规范值）：
         sky-500 #0ea5e9 白底仅 2.77:1、白字 2.77:1 → 不能作文字/实底 CTA
         文字档与实底 CTA 取 sky-700 #0369a1（白底 5.05:1 / 白字 5.05:1 ✓）
         深/浅强调档 sky-300 #7dd3fc（深蓝底 ~8:1）/ sky-50 #f0f9ff
   换肤只改这一处 —— 51 个组件零改动复用，站内差异只来自配色令牌。
   ========================================================================== */
:root{
  --navy-900:#172554;   /* 深底渐变起点（blue-950） */
  --navy-800:#1e3a8a;   /* 主色深档（blue-900）：头部/深底区块 */
  --navy-700:#1d4ed8;   /* ← S17 规范主色 blue-600：链接/标题（白底 6.3:1） */
  --navy-500:#3b82f6;   /* 强调描边 / hover（blue-500） */
  --navy-100:#dbeafe;   /* 深底上的正文色（blue-100） */
  --navy-50:#eff6ff;    /* 浅色交替区块底（blue-50） */

  /* 强调色：gold 名下实为「品牌强调」角色。实底 CTA 用 #0369a1+白字（5.05:1），
     sky-300 承担描边/图标/深底强调（规范 accent #0ea5e9 同族）。 */
  --gold-600:#02557e;   /* 文字档 hover（白底 6.7:1） */
  --gold-500:#0369a1;   /* 实底 CTA 底 / 文字档（白底 5.05:1，配 .btn-gold 白字） */
  --gold-300:#7dd3fc;   /* 深底上的强调（sky-300，深蓝底 ~8:1） */
  --gold-50:#f0f9ff;    /* 浅强调底（sky-50） */

  --border:#cdd9f4;     /* 蓝灰边框，跟随主色 */
  --surface:#fff;

  --shadow-sm:0 1px 2px rgba(23,37,84,.06);
  --shadow:0 4px 14px rgba(23,37,84,.08);
  --shadow-lg:0 14px 34px rgba(23,37,84,.14);
  --shadow-gold:0 4px 14px rgba(3,105,161,.26);

  /* S17 没有可用照片（assets/img 为空）时的降级块底色，跟随蓝系 */
  --ph-tint:#eaf1fc;
}

/* 实底 CTA：sky-700 底 + 白字（5.05:1；库默认深字只有 ~3:1） */
.btn-gold{ color:#fff; }
.btn-gold:hover{ background:#02557e; color:#fff; }

/* 降级块在蓝系皮肤下的底色 */
.img-ph{
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(45deg, rgba(29,78,216,.045) 0 9px, rgba(29,78,216,0) 9px 18px),
    var(--ph-tint);
}

/* --------------------------------------------------------------------------
   组件库内「写死的 S02 藏蓝/金值」（不走令牌）—— 皮肤层逐点收编。
   来源：对 modules.css 全量色值扫描（同 S08/S11/S14 方法）。
   -------------------------------------------------------------------------- */

/* 01/01 Hero 基类：原 linear-gradient(#061a33,#0a2547,#0f3460) → S17 蓝阶 */
.m-hero{ background:linear-gradient(135deg,#172554,#1e3a8a 60%,#1d4ed8); }
.m-hero::after{ background:radial-gradient(circle,rgba(3,105,161,.22),transparent 68%); }
.m-hero .lead{ color:#dbeafe; }        /* 原蓝白 #d6e4f5 → blue-100 */

/* Header 变体 B（全站头部）：原 rgba(6,26,51,.97)/rgba(10,37,71,.94) */
.m-hdr[data-v="b"]{
  background:linear-gradient(180deg,rgba(23,37,84,.97),rgba(30,58,138,.94));
}

/* 01/08 数据统计（深底卡）：标签文字原蓝白 */
.m-stats .l{ color:#dbeafe; }

/* 03/05 演示块播放钮 / 08/04 弹窗遮罩：暗调跟随主色 */
.m-demo .play span{ background:rgba(23,37,84,.82); }
.m-modal{ background:rgba(23,37,84,.6); }

/* 06 组 m-sop 色板半格：原 #0f3460 */
.m-sop .swatch.c{ background:linear-gradient(135deg,#f5f4f1 50%,#1e3a8a 50%); }

/* 组件内硬编码金色 rgba → 品牌强调（sky/蓝）rgba */
.m-cert .ic, .m-quote .q-mark{ color:var(--gold-300); }

/* ===== S17 补齐模块（JP navy+sky） ===== */
.m17-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.m17-metric{border:1px solid var(--border,#cdd9f4);border-top:3px solid #0369a1;background:#fff;padding:20px;text-align:center}
.m17-metric .n{font-size:30px;font-weight:800;color:#1e3a8a;line-height:1.1}
.m17-metric .l{font-size:13px;color:#64748b;margin-top:6px}
.m17-lc{position:fixed;left:22px;bottom:26px;z-index:900;display:flex;flex-direction:column;gap:10px}
.m17-lc-btn{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.m17-wa{background:#25d366}
.m17-chat{background:linear-gradient(135deg,#1e3a8a,#0369a1)}
.m17-pop{position:fixed;left:22px;bottom:92px;z-index:950;width:300px;background:#fff;border:1px solid var(--border,#cdd9f4);border-top:4px solid #0369a1;border-radius:12px;padding:20px;display:none;box-shadow:0 12px 30px rgba(23,37,84,.2)}
.m17-pop.open{display:block}
.m17-pop h4{margin:0 0 6px;color:#172554}
.m17-pop p{margin:0 0 12px;font-size:13px;color:#64748b}
.m17-pop input,.m17-pop textarea{width:100%;box-sizing:border-box;padding:11px;border:1px solid var(--border,#cdd9f4);border-radius:8px;margin-bottom:10px;font-size:14px}
.m17-pop .btn{width:100%}
.m17-top{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;background:#172554;color:#fff;border:1px solid #0369a1;cursor:pointer;font-size:20px;z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 4px 14px rgba(23,37,84,.35)}
.m17-top.show{opacity:1;pointer-events:auto}

/* hero real photo */
.m-hero .m-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block;}
.m-hero .m-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,18,40,.85) 0%,rgba(8,18,40,.5) 55%,rgba(8,18,40,.15) 100%);}
.m-hero .wrap,.m-hero .hero-in{position:relative;z-index:2;}

/* ===== 卡片满行修复（S17 · 2026-09-21） ===== */
/* m17-metrics 4 卡：656-871 三列下末卡跨满（<=655 两列 2+2 本满，>871 四列自然满） */
@media (min-width: 656px) and (max-width: 871px) {
  .m17-metrics:not(:has(> :nth-child(5))) > :nth-child(4):last-child { grid-column: 1 / -1; }
}
/* ===== END-FULLROW-S17 ===== */

/* === lingomere logo rollout 2026-09-28 === */
a.brand, header .brand, .main-header .brand, .site-header .brand, .m-hdr .brand {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.brand-logo, .brand .mark, .brand .lg, .brand .brand-mark {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  max-width: none !important;
}
.brand-logo-img, .brand .mark img, .brand .lg img, .brand .brand-mark img {
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
.brand-text, .brand .mark + span, .brand .lg + span, .brand .brand-mark + span {
  display: none !important;
}
.brand-logo::after, .brand .mark::after, .brand .lg::after, .brand .brand-mark::after {
  display: none !important;
}