/* CSS Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===========================================================
   美美了么 — 韩国医美决策平台
   基础 Tokens + 共用组件样式
   =========================================================== */

:root {
  /* 中性基底色(奶白米白系统) */
  --mml-paper: #FAF7F3;          /* 主画纸 */
  --mml-cream: #F3ECE4;          /* 米白 */
  --mml-mist: #EEE8E1;           /* 雾白 */
  --mml-line: #E5DDD3;           /* 分割线/边框 */
  --mml-line-soft: #EFE9E1;      /* 更浅分割 */

  /* 文本 */
  --mml-ink: #2C2826;            /* 深文 */
  --mml-ink-2: #4A443F;          /* 次文 */
  --mml-ink-3: #6B6560;          /* 说明文 */
  --mml-ink-4: #9A9289;          /* 弱提示 */

  /* 点缀(低饱和裸驼 & 雾粉) */
  --mml-accent: #C9A896;         /* 主点缀 裸驼 */
  --mml-accent-soft: #E8D5CC;    /* 辅助 雾粉 */
  --mml-accent-deep: #A88876;    /* hover */
  --mml-sand: #D9C7B4;           /* 沙米 */

  /* 状态色 */
  --mml-ok: #8DA68A;             /* 哑绿 */
  --mml-star: #C9A14A;           /* 评分金 */

  /* 圆角 */
  --mml-r-sm: 6px;
  --mml-r-md: 10px;
  --mml-r-lg: 16px;
  --mml-r-xl: 24px;
  --mml-r-full: 999px;

  /* 阴影(极轻) */
  --mml-shadow-sm: 0 1px 2px rgba(44, 40, 38, 0.04);
  --mml-shadow-md: 0 8px 24px -12px rgba(44, 40, 38, 0.10);
  --mml-shadow-lg: 0 24px 48px -24px rgba(44, 40, 38, 0.15);

  /* 字体 */
  --mml-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", -apple-system, system-ui, sans-serif;
  --mml-font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --mml-font-en: "Cormorant Garamond", "Noto Serif SC", serif;
  --mml-font-en-sans: "Inter", "Noto Sans SC", sans-serif;

  /* 版式节奏 */
  --mml-step: 8px;
}

/* 深色模式(低对比暖黑,不是纯黑) */
[data-mode="dark"] {
  --mml-paper: #1A1816;
  --mml-cream: #201D1A;
  --mml-mist: #26221F;
  --mml-line: #2E2A26;
  --mml-line-soft: #252220;
  --mml-ink: #F0EAE2;
  --mml-ink-2: #C9C1B6;
  --mml-ink-3: #9A9289;
  --mml-ink-4: #6B6560;
  --mml-accent-soft: #3A2F28;
  --mml-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --mml-shadow-md: 0 8px 24px -12px rgba(0,0,0,0.5);
  --mml-shadow-lg: 0 24px 48px -24px rgba(0,0,0,0.6);
}

/* =================== 重置 + 基础 =================== */

*, *::before, *::after { box-sizing: border-box; }

.mml-root {
  font-family: var(--mml-font-sans);
  color: var(--mml-ink);
  background: var(--mml-paper);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-size: 15px;
}

.mml-root a { color: inherit; text-decoration: none; }
.mml-root button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }
.mml-root img { display: block; max-width: 100%; }
.mml-root h1, .mml-root h2, .mml-root h3, .mml-root h4, .mml-root h5, .mml-root h6, .mml-root p { margin: 0; }

/* 密度变量(由 Tweaks 控制) */
.mml-root[data-density="compact"] { --mml-y: 48px; --mml-y-lg: 72px; }
.mml-root[data-density="cozy"]    { --mml-y: 72px; --mml-y-lg: 120px; }
.mml-root[data-density="airy"]    { --mml-y: 112px; --mml-y-lg: 180px; }

/* 通用容器 */
.mml-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.mml-container-wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* =================== 排版类 =================== */

.mml-eyebrow {
  font-family: var(--mml-font-en-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mml-ink-3);
  font-weight: 500;
}
.mml-eyebrow-dot::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mml-accent);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-2px);
}

.mml-h-serif {
  font-family: var(--mml-font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: pretty;
}
.mml-h-sans {
  font-family: var(--mml-font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: pretty;
}

.mml-muted { color: var(--mml-ink-3); }
.mml-fine { color: var(--mml-ink-4); font-size: 12.5px; letter-spacing: 0.05em; }

/* =================== 通用组件 =================== */

/* 按钮 */
.mml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--mml-r-full);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all .2s ease;
  white-space: nowrap;
}
/* color 用 !important 强制生效 — 覆盖 .mml-root a/button 的 color:inherit reset */
.mml-btn-primary {
  background: var(--mml-ink) !important;
  color: var(--mml-paper) !important;
}
.mml-btn-primary:hover { background: #000 !important; }
.mml-btn-accent {
  background: var(--mml-accent) !important;
  color: #fff !important;
}
.mml-btn-accent:hover { background: var(--mml-accent-deep) !important; }
.mml-btn-ghost {
  background: transparent !important;
  color: var(--mml-ink) !important;
  border: 1px solid var(--mml-line) !important;
}
.mml-btn-ghost:hover { border-color: var(--mml-ink) !important; }
.mml-btn-link {
  padding: 0;
  height: auto;
  color: var(--mml-ink);
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* 小标签 */
.mml-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--mml-r-full);
  font-size: 12px;
  background: var(--mml-mist);
  color: var(--mml-ink-2);
  border: 1px solid var(--mml-line-soft);
}
.mml-tag-accent {
  background: var(--mml-accent-soft);
  color: var(--mml-accent-deep);
  border-color: transparent;
}

/* 卡片 */
.mml-card {
  background: #fff;
  border: 1px solid var(--mml-line-soft);
  border-radius: var(--mml-r-lg);
  overflow: hidden;
  transition: all .25s ease;
}
[data-mode="dark"] .mml-card { background: var(--mml-cream); }
.mml-card:hover { border-color: var(--mml-line); box-shadow: var(--mml-shadow-md); }

/* 占位图 */
.mml-img {
  position: relative;
  background: linear-gradient(135deg, var(--mml-cream), var(--mml-mist));
  overflow: hidden;
}
.mml-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mml-img-label {
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--mml-font-en-sans);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 4px;
}

/* 分割 */
.mml-hr { height: 1px; background: var(--mml-line); width: 100%; }

/* 星评 */
.mml-stars { color: var(--mml-star); font-size: 12px; letter-spacing: 2px; }

/* 隐形滚动条 */
.mml-scrollx {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mml-scrollx::-webkit-scrollbar { display: none; }

/* =================== Artboard 滚动容器 =================== */
.mml-artboard-scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mml-line) transparent;
}
.mml-artboard-scroll::-webkit-scrollbar { width: 6px; }
.mml-artboard-scroll::-webkit-scrollbar-thumb {
  background: var(--mml-line);
  border-radius: 3px;
}

/* 美美了么设计 token 系统(原样保留,不做修改) */

/* 全局基础(从 v2-home.html 迁移) */
html, body {
  margin: 0;
  padding: 0;
  background: var(--mml-paper);
}

body {
  font-family: var(--mml-font-sans);
  color: var(--mml-ink);
  -webkit-font-smoothing: antialiased;
}

/* 全站宽度自适应 — 最小支持 375px，向下不再适配 */
html, body { overflow-x: hidden; min-width: 375px; }

/* 强调色变体(原样保留) */
[data-accent="rose"]      { --mml-accent:#D4B5B0; --mml-accent-soft:#EFDCD7; --mml-accent-deep:#B39690; }
[data-accent="driftwood"] { --mml-accent:#C9A896; --mml-accent-soft:#E8D5CC; --mml-accent-deep:#A88876; }
[data-accent="stone"]     { --mml-accent:#A8998A; --mml-accent-soft:#D8D0C5; --mml-accent-deep:#887A6C; }
[data-accent="mocha"]     { --mml-accent:#8B7355; --mml-accent-soft:#D4C4B0; --mml-accent-deep:#6D5840; }

/* 动画 */
@keyframes mmlTabFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================
   响应式自适应层 — 桌面 / 平板 / 移动多档
   覆盖 v2-home.tsx 与 header.php 中 inline style 的固定宽度/网格/padding
   全部使用 !important 是因为内嵌 inline style 优先级最高
   =========================================================== */

/* ---------- 通用 section / grid 类（v2-home.tsx 顶层挂载点 + 各 section）---------- */
.mml-section,
.mml-section-bg > .mml-section-inner {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
}

.mml-grid { display: grid; }
.mml-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mml-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mml-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mml-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- 平板及以下：1280 → 1024 ---------- */
@media (max-width: 1280px) {
  .mml-container, .mml-container-wide { padding: 0 32px !important; }
  .mml-section { padding-left: 32px !important; padding-right: 32px !important; }
  .mml-section-bg > .mml-section-inner { padding-left: 32px !important; padding-right: 32px !important; }
  .mml-site-header > .mml-site-topbar { padding-left: 32px !important; padding-right: 32px !important; }
  .mml-site-header > .mml-site-mainbar { padding-left: 32px !important; padding-right: 32px !important; }
  .mml-site-footer .mml-site-footer-inner { padding-left: 32px !important; padding-right: 32px !important; }

  .mml-grid-5 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---------- 平板：1024 → 768 ---------- */
@media (max-width: 1024px) {
  .mml-container, .mml-container-wide { padding: 0 24px !important; }
  .mml-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  .mml-section-bg { padding-top: 64px !important; padding-bottom: 64px !important; }
  .mml-section-bg > .mml-section-inner { padding-left: 24px !important; padding-right: 24px !important; }

  .mml-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .mml-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .mml-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero / Service 二列 → 单列 */
  .mml-hero-grid,
  .mml-service-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mml-home-hero { padding: 56px 24px 64px !important; }
  .mml-hero-title { font-size: 48px !important; }

  /* Header：顶层条隐藏（关于/平台/排名规则/语言切换） + 搜索按钮隐藏 */
  .mml-site-header > .mml-site-topbar { display: none !important; }
  .mml-site-header > .mml-site-mainbar { padding: 14px 24px !important; }
  .mml-site-header .mml-site-mainbar > div:first-child { gap: 18px !important; }
  .mml-site-header nav { gap: 14px !important; overflow-x: auto; scrollbar-width: none; max-width: 100%; flex-shrink: 1; min-width: 0; }
  .mml-site-header nav > a { font-size: 13px !important; white-space: nowrap !important; }
  .mml-site-header nav::-webkit-scrollbar { display: none; }
  .mml-site-header .mml-site-mainbar > div:last-child { gap: 8px !important; }
  .mml-site-header .mml-site-action-search { display: none !important; }

  /* Footer */
  .mml-site-footer .mml-site-footer-inner { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---------- 移动端：≤768（最小 375） ---------- */
@media (max-width: 768px) {
  .mml-container, .mml-container-wide { padding: 0 16px !important; }
  .mml-section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 48px !important; padding-bottom: 48px !important; }
  .mml-section-bg { padding-top: 48px !important; padding-bottom: 48px !important; }
  .mml-section-bg > .mml-section-inner { padding-left: 16px !important; padding-right: 16px !important; }

  /* 移动端一律单列 */
  .mml-grid-5,
  .mml-grid-4,
  .mml-grid-3,
  .mml-grid-2 { grid-template-columns: 1fr !important; }

  .mml-home-hero { padding: 32px 16px 48px !important; }
  .mml-hero-title { font-size: 32px !important; line-height: 1.2 !important; }
  .mml-hero-grid { gap: 28px !important; }
  .mml-hero-grid > div > p { font-size: 14px !important; max-width: 100% !important; }
  /* Hero 浮卡为装饰元素，移动端直接隐藏避免遮挡主图与溢出 */
  .mml-hero-floating-card,
  .mml-hero-floating-stat { display: none !important; }

  .mml-section-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .mml-section-head h2 { font-size: 24px !important; }

  /* Header：顶层条隐藏，主层 nav + 操作按钮全部塞进汉堡抽屉 */
  .mml-site-header > .mml-site-topbar { display: none !important; }
  .mml-site-header > .mml-site-mainbar { padding: 12px 16px !important; }
  .mml-site-header .mml-site-mainbar > div:first-child { gap: 12px !important; flex: 1; min-width: 0; }
  .mml-site-header nav { display: none !important; }
  .mml-site-header .mml-site-action-search,
  .mml-site-header .mml-site-action-consult { display: none !important; }
  .mml-site-header .mml-site-action-book { padding: 0 14px !important; height: 36px !important; font-size: 12.5px !important; flex-shrink: 0; }

  /* 汉堡按钮显示 */
  .mml-site-hamburger { display: inline-flex !important; }

  /* logo MEILE 英文副标在窄屏（≤480）隐藏，让出按钮空间 */
  .mml-site-header .mml-site-mainbar > div:first-child { flex-shrink: 1; min-width: 0; }
  .mml-site-header .mml-site-mainbar > div:first-child > a { min-width: 0; }
}

@media (max-width: 480px) {
  .mml-site-header .mml-site-mainbar > div:first-child > a > .mml-fine { display: none !important; }

  /* Footer 列布局收紧 */
  .mml-site-footer .mml-site-footer-inner { padding: 56px 16px 0 !important; }
  .mml-site-footer nav { gap: 14px 22px !important; }
  .mml-site-footer .mml-site-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
}

/* ===========================================================
   汉堡抽屉菜单（移动端） — 桌面默认隐藏，≤768 启用
   =========================================================== */

/* 汉堡按钮（默认桌面隐藏） */
.mml-site-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--mml-line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.mml-site-hamburger-icon,
.mml-site-hamburger-icon::before,
.mml-site-hamburger-icon::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--mml-ink);
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.mml-site-hamburger-icon { position: relative; }
.mml-site-hamburger-icon::before { position: absolute; top: -5px; left: 0; }
.mml-site-hamburger-icon::after  { position: absolute; top:  5px; left: 0; }

/* 抽屉打开态：图标变成 X */
.mml-site-header[data-menu-open="true"] .mml-site-hamburger-icon {
  background: transparent;
}
.mml-site-header[data-menu-open="true"] .mml-site-hamburger-icon::before {
  top: 0; transform: rotate(45deg);
}
.mml-site-header[data-menu-open="true"] .mml-site-hamburger-icon::after {
  top: 0; transform: rotate(-45deg);
}

/* 抽屉面板（默认隐藏，桌面也不渲染） */
.mml-site-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(250, 247, 243, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 76px 24px 48px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mml-site-header[data-menu-open="true"] + .mml-site-drawer,
.mml-site-drawer[data-menu-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mml-site-drawer { display: block; }
}

.mml-site-drawer-section {
  border-bottom: 1px solid var(--mml-line-soft);
  padding: 18px 0;
}
.mml-site-drawer-section:last-child { border-bottom: none; }
.mml-site-drawer-eyebrow {
  font-family: var(--mml-font-en-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mml-ink-4);
  margin-bottom: 14px;
}
.mml-site-drawer a:not(.mml-btn) {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px;
  color: var(--mml-ink);
  text-decoration: none;
  padding: 12px 0;
  font-family: var(--mml-font-sans);
}
.mml-site-drawer a:not(.mml-btn)[aria-current="page"] {
  color: var(--mml-accent-deep);
  font-weight: 500;
}
.mml-site-drawer a:not(.mml-btn)::after {
  content: "→";
  color: var(--mml-ink-4);
  font-size: 14px;
}
.mml-site-drawer-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 20px;
}
.mml-site-drawer-actions .mml-btn { width: 100%; height: 48px; font-size: 14px; }

/* 抽屉打开时锁定 body 滚动 */
body.mml-menu-open { overflow: hidden; }