/* ==========================================================================
   SIT 独立站 · base.css
   设计令牌 / 重置 / 排版 / 通用组件
   设计稿来源：SIT 独立站 v1.4（纯白底 + 描边卡 + 漆黑衬线标题 + 中国红）
   ========================================================================== */

:root {
  /* ---- 色彩 ---- */
  --ink: #141722;          /* 漆黑：标题、深色页脚 */
  --paper: #ffffff;        /* 纯白：页面底、卡片 */
  --cream: #faf7f3;        /* 浅米：交替分区底 */
  --line: #ede7df;         /* 描边 */
  --red: #be3a26;          /* 中国红：按钮、点缀 */
  --red-soft: #ebb9ac;     /* 浅红：深色底上的点缀字 */
  --red-tint: #fbf0ed;     /* 极浅红底 */
  --body: #4a4a55;         /* 正文 */
  --muted: #8a8578;        /* 次级说明 */
  --dim: #6b6b62;
  --on-dark: #ffffff;
  --on-dark-body: #c9c6c0;
  --on-dark-muted: #9a968e;

  /* ---- 字体 ---- */
  --font-serif: "EB Garamond", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ---- 字号（移动端为基准，PC 端在 layout.css 覆盖） ---- */
  --fs-hero: clamp(30px, 8.6vw, 38px);
  --fs-h1: clamp(23px, 6.6vw, 27px);
  --fs-h2: clamp(20px, 5.6vw, 22px);
  --fs-h3: clamp(16px, 4.4vw, 17px);
  --fs-lead: clamp(15px, 4.1vw, 16px);
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-eyebrow: 11px;
  --fs-micro: 10px;

  /* ---- 间距 / 圆角 ---- */
  --pad-x: 20px;
  --sec-y: 52px;
  --r-card: 18px;
  --r-box: 16px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 23, 34, 0.04);
  --shadow-float: 0 6px 24px rgba(20, 23, 34, 0.14);

  /* ---- 布局 ---- */
  --maxw: 1080px;
  --tabbar-h: 58px;      /* 移动端底部 4 等分 Tab Bar 高度 */
  --bottomnav-h: 56px;   /* PC 端底部完整模块导航高度 */
  --header-h: 60px;
}

/* --------------------------------------------------------------------------
   中文版专用字体：标题与正文统一为思源宋体
   Google Fonts 的 Noto Serif SC 即思源宋体（Source Han Serif 的 Google 版本），
   同时写进 serif 与 sans 两个变量，才能保证正文也落在宋体上；
   其他语言仍在 :root 里用无衬线正文 + 衬线标题，不受影响。
   -------------------------------------------------------------------------- */
html[data-lang="zh"] {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
    "Songti SC", "SimSun", Georgia, serif;
  --font-sans: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
    "Songti SC", "SimSun", Georgia, serif;
}

/* --------------------------------------------------------------------------
   韩文版专用字体
   谚文不在西文的 EB Garamond / Inter 字形范围内，若不显式指定就会掉到思源宋体
   或系统默认字体上，中英日韩混排时会明显跳字。
   这里按全站基准的层级走：标题衬线（Noto Serif KR）+ 正文无衬线（Noto Sans KR），
   与英文版排版层级一致，也与中文版的宋体调性衔接。
   -------------------------------------------------------------------------- */
html[data-lang="ko"] {
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo",
    "Malgun Gothic", Georgia, serif;
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* 图标 SVG 统一块级：避免行内基线对齐让图案在按钮里偏下 */
.iconbtn svg, .fab svg, .tab__icon svg, .svc__icon svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   多语言排版修正（防溢出 / 断行美观）
   -------------------------------------------------------------------------- */
[lang^="zh"], [lang^="ja"] {
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
[lang^="zh"] .hero-title, [lang^="ja"] .hero-title { line-height: 1.26; }
[lang^="zh"] h1, [lang^="ja"] h1, [lang^="zh"] h2, [lang^="ja"] h2 { line-height: 1.34; }
[lang^="zh"] .eyebrow, [lang^="ja"] .eyebrow { letter-spacing: 0.08em; }

[lang="es"], [lang="en"] {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* 西语/英文长词在窄屏更易溢出，标题字号略微下调 */
[lang="es"] .hero-title { font-size: clamp(27px, 7.8vw, 34px); }
[lang="es"] .h1 { font-size: clamp(21px, 6vw, 25px); }
[lang="es"] .card-title { font-size: clamp(15px, 4.2vw, 16px); }

/* --------------------------------------------------------------------------
   排版
   -------------------------------------------------------------------------- */
.serif { font-family: var(--font-serif); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.4;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.18;
  color: var(--on-dark);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
  text-wrap: balance;
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--body);
  text-wrap: pretty;
}

.small { font-size: var(--fs-sm); line-height: 1.66; color: var(--dim); }
.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   链接 / 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, opacity .16s ease;
  text-align: center;
  max-width: 100%;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: #a82f1e; }

.btn--outline {
  background: transparent;
  border-color: rgba(190, 58, 38, .5);
  color: var(--red);
}
.btn--outline:hover { background: var(--red-tint); }

.btn--block { display: flex; width: 100%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}
.textlink::after { content: "→"; font-weight: 600; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   胶囊标签
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip--light { background: rgba(255, 255, 255, .16); color: #fff; }

/* 可点击标签（头图四个标签）：保留胶囊外观，补上链接的交互反馈 */
.chip--link { text-decoration: none; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.chip--link:hover, .chip--link:focus-visible { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.chip--link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card--accent { border: 1.5px solid rgba(190, 58, 38, .55); }
.card-pad { padding: 16px; }

.card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   分区
   -------------------------------------------------------------------------- */
.section { padding: var(--sec-y) var(--pad-x); }
.section--alt { background: var(--cream); }
.section__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.section__head .body { max-width: 62ch; }

/* --------------------------------------------------------------------------
   手风琴
   -------------------------------------------------------------------------- */
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.acc__q { flex: 1; line-height: 1.5; overflow-wrap: break-word; }
.acc__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  position: relative;
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: var(--muted);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.acc__icon::before { left: 2px; top: 9px; width: 16px; height: 1.6px; }
.acc__icon::after { left: 9px; top: 2px; width: 1.6px; height: 16px; }
.acc__item.is-open .acc__icon::after { transform: scaleY(0); opacity: 0; }
.acc__item.is-open .acc__icon::before { background: var(--red); }
.acc__panel {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--body);
}
.acc__item.is-open .acc__panel { display: block; }

/* --------------------------------------------------------------------------
   表单
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 11px; font-weight: 500; color: var(--on-dark-muted); }
.field__control {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--on-dark);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.field__control::placeholder { color: #8d8a83; }
.field__control:focus { outline: none; border-color: var(--red); background: rgba(255, 255, 255, .12); }
textarea.field__control { min-height: 92px; }

.form__msg {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.form__msg.is-ok { display: block; background: rgba(255, 255, 255, .1); color: #fff; }
.form__msg.is-error { display: block; background: rgba(190, 58, 38, .22); color: #f6d8d2; }

/* --------------------------------------------------------------------------
   工具类
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   A3 · 提交后二次引导
   -------------------------------------------------------------------------- */
.enquiry__after {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 2px solid var(--red);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.enquiry__after[hidden] { display: none; }
.enquiry__after-title { margin: 0; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .02em; }
.enquiry__after-intro { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--on-dark-muted); }
.enquiry__after-links {
  margin: 10px 0 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.enquiry__after-links a { font-size: 13px; }

/* --------------------------------------------------------------------------
   F15 · 移动端表单：字号 ≥16px 可避免 iOS 聚焦时自动放大导致布局跳动
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .field__control,
  textarea.field__control { font-size: 16px; }
  .enquiry__submit { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}