/*
 * base.css — 全模板共享的核心样式（15 号 §6；由模板引擎自动先于模板样式引入）。
 *
 * 1. 五行色 token（오방색 惯例：목=청 / 화=적 / 토=황 / 금=백 / 수=흑），全模板统一，模板不得重定义；
 *    五行着色一律「chip 底色 + 对比文字」：组件只写 fs-el--<key>，由本文件换算为 --fs-el / --fs-el-text / --fs-el-border。
 * 2. 语义 token --fs-*：中性默认值；模板在自己的 style.css 里把它们指向 --tpl-<slug>-* 即可让核心组件换肤。
 * 3. 断点（统一四档，移动优先，基准 <576px）：576px / 768px / 1024px / 1200px。媒体查询不能读取变量，下方 --fs-bp-* 仅作登记；
 *    写法一律 (min-width: 576px | 768px | 1024px | 1200px) 或 (max-width: 575.98px | 767.98px | 1023.98px | 1199.98px)。
 * 4. 语言排版：按 html[lang] 切换字体栈（模板不得自造）；ko 正文 keep-all 按词断行（ja / zh 不加）；字重只用 400 / 700；
 *    金额与表格数字等宽（tabular-nums）；触控目标 ≥44px；移动端正文与输入框 ≥16px。
 * 5. fs-* 核心组件基础样式：结构类名定稿不可改，外观由模板覆盖；文件级回退视图靠它保证可用。
 * 纯色块与几何形状，不含任何图片、标志或符号类图形。
 */

:root {
  /* ── 五行色（15 号 §6 定稿值） ── */
  --el-wood: #3E7C4F;
  --el-fire: #C0392B;
  --el-earth: #D4A017;
  --el-metal: #AEB4BC;
  --el-water: #2E3440;
  --el-metal-border: #8B9199;
  --el-wood-text: #FFFFFF;
  --el-fire-text: #FFFFFF;
  --el-earth-text: #1F2329;
  --el-metal-text: #1F2329;
  --el-water-text: #FFFFFF;

  /* ── 断点登记（媒体查询按注释中的数值书写） ── */
  --fs-bp-sm: 576px;
  --fs-bp-md: 768px;
  --fs-bp-lg: 1024px;
  --fs-bp-xl: 1200px;

  /* ── 语义 token（中性默认，模板覆盖） ── */
  --fs-bg: #FFFFFF;
  --fs-card: #FFFFFF;
  --fs-surface: #F4F5F7;
  --fs-text: #1F2329;
  --fs-muted: #6B7280;
  --fs-line: #E3E6EA;
  --fs-primary: #3B5B7A;
  --fs-primary-text: #FFFFFF;
  --fs-accent: #A57A2C;
  --fs-danger: #B42318;
  --fs-success: #1E7B4E;
  --fs-warning: #946200;
  --fs-info: #2F5D8A;
  --fs-focus: #7AA2C8;
  --fs-fact: #4B5563;
  --fs-reading: var(--fs-primary);
  --fs-advice: var(--fs-accent);
  --fs-radius: 14px;
  --fs-radius-sm: 8px;
  --fs-radius-pill: 999px;
  --fs-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 6px 20px rgba(17, 24, 39, 0.06);
  --fs-cta-height: 56px;
  --fs-touch: 44px;

  /* ── 字体栈 ── */
  --fs-font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --fs-font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --fs-font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --fs-font-other: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-font-serif-ko: "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  --fs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ═══════════════════ 基础 ═══════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fs-font-other);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 语言排版（15 号 §6：按 html[lang] 切换，模板不得自造） */
html[lang="ko"] body {
  font-family: var(--fs-font-ko);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html[lang="ja"] body {
  font-family: var(--fs-font-ja);
  line-height: 1.75;
}

html[lang="zh"] body {
  font-family: var(--fs-font-zh);
  line-height: 1.75;
}

/* 页面内嵌其他语言的内容（如 <article lang="ko"> 的报告出现在 ja 页面，19 号 §8） */
body [lang="ko"] {
  font-family: var(--fs-font-ko);
  word-break: keep-all;
  overflow-wrap: break-word;
}

body [lang="ja"] {
  font-family: var(--fs-font-ja);
  word-break: normal;
}

body [lang="zh"] {
  font-family: var(--fs-font-zh);
  word-break: normal;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

b,
strong,
th {
  font-weight: 700;
}

input,
select,
textarea,
button {
  font: inherit;
  letter-spacing: inherit;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

table,
.fs-num,
.fs-money {
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fs-focus);
  outline-offset: 2px;
}

.fs-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fs-money {
  white-space: nowrap;
}

/* 移动端正文与输入框字号 ≥16px（防 iOS 聚焦放大） */
@media (max-width: 767.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ═══════════════════ 五行 chip ═══════════════════ */

.fs-el--wood {
  --fs-el: var(--el-wood);
  --fs-el-text: var(--el-wood-text);
  --fs-el-border: var(--el-wood);
}

.fs-el--fire {
  --fs-el: var(--el-fire);
  --fs-el-text: var(--el-fire-text);
  --fs-el-border: var(--el-fire);
}

.fs-el--earth {
  --fs-el: var(--el-earth);
  --fs-el-text: var(--el-earth-text);
  --fs-el-border: var(--el-earth);
}

.fs-el--metal {
  --fs-el: var(--el-metal);
  --fs-el-text: var(--el-metal-text);
  --fs-el-border: var(--el-metal-border);
}

.fs-el--water {
  --fs-el: var(--el-water);
  --fs-el-text: var(--el-water-text);
  --fs-el-border: var(--el-water);
}

.fs-el {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fs-el-border, var(--fs-line));
  border-radius: var(--fs-radius-sm);
  background: var(--fs-el, var(--fs-surface));
  color: var(--fs-el-text, var(--fs-text));
}

/* ═══════════════════ 语言切换器 fs-lang-switcher ═══════════════════ */

.fs-lang-switcher__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-lang-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fs-touch);
  min-height: var(--fs-touch);
  padding: 0 10px;
  border-radius: var(--fs-radius-sm);
  color: var(--fs-muted);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.fs-lang-switcher__link:hover {
  background: var(--fs-surface);
  color: var(--fs-text);
}

.fs-lang-switcher__link[aria-current="true"] {
  color: var(--fs-text);
  font-weight: 700;
}

/* ═══════════════════ 免责声明 / 语言徽标 / 空与加载状态 ═══════════════════ */

.fs-disclaimer {
  margin: 0;
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.7;
}

.fs-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.6;
}

.fs-empty {
  margin: 0;
  padding: 32px 16px;
  border: 1px dashed var(--fs-line);
  border-radius: var(--fs-radius);
  color: var(--fs-muted);
  text-align: center;
}

.fs-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -4px;
  animation: fs-spin 0.8s linear infinite;
}

.fs-skeleton {
  display: block;
  min-height: 14px;
  border-radius: var(--fs-radius-sm);
  background: linear-gradient(90deg, var(--fs-surface) 25%, var(--fs-line) 50%, var(--fs-surface) 75%);
  background-size: 200% 100%;
  animation: fs-shimmer 1.4s ease-in-out infinite;
}

@keyframes fs-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fs-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* ═══════════════════ 四柱 fs-pillars ═══════════════════ */

.fs-pillars {
  margin: 0 0 24px;
  overflow-x: auto;
}

.fs-pillars__table {
  width: 100%;
  min-width: 288px;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
  text-align: center;
}

.fs-pillars__caption {
  margin: 0 0 8px;
  color: var(--fs-muted);
  font-size: 14px;
  text-align: left;
}

.fs-pillars__head {
  padding: 4px 2px 8px;
  color: var(--fs-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: bottom;
}

.fs-pillars__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
}

.fs-pillars__row td {
  padding: 0;
  vertical-align: top;
}

.fs-pillars__char {
  width: 100%;
  min-height: 64px;
  padding: 6px 2px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.fs-pillars__row--hidden td {
  padding-top: 2px;
}

.fs-pillars__row--hidden td > * + * {
  margin-top: 4px;
}

.fs-pillars__hidden {
  width: 100%;
  min-height: 36px;
  padding: 4px 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.fs-pillars__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
}

.fs-pillars .is-empty {
  display: block;
  min-height: 36px;
  border: 1px dashed var(--fs-line);
  border-radius: var(--fs-radius-sm);
}

/* ═══════════════════ 五行分布 fs-elements-bar ═══════════════════ */

.fs-elements-bar {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.fs-elements-bar__item {
  display: grid;
  grid-template-columns: minmax(64px, 88px) 1fr 52px;
  align-items: center;
  gap: 10px;
}

.fs-elements-bar__label {
  font-size: 14px;
  font-weight: 700;
}

.fs-elements-bar__track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-surface);
}

.fs-elements-bar__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--fs-el, var(--fs-primary));
  box-shadow: inset 0 0 0 1px var(--fs-el-border, transparent);
}

.fs-elements-bar__value {
  color: var(--fs-muted);
  font-size: 14px;
  text-align: right;
}

/* ═══════════════════ 章节内容块 fs-block（10 号 §6 三级可信度） ═══════════════════ */

.fs-block {
  --fs-level: var(--fs-reading);
  margin: 0 0 16px;
  padding: 18px 18px 16px;
  border: 1px solid var(--fs-line);
  border-left: 4px solid var(--fs-level);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-card);
}

.fs-block--fact {
  --fs-level: var(--fs-fact);
}

.fs-block--reading {
  --fs-level: var(--fs-reading);
}

.fs-block--advice {
  --fs-level: var(--fs-advice);
}

.fs-block__badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-level);
  color: var(--fs-primary-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.fs-block__title {
  margin: 0 0 8px;
  font-size: 18px;
}

.fs-block__text {
  margin: 0 0 10px;
}

.fs-block__text:last-child {
  margin-bottom: 0;
}

.fs-block__list {
  margin: 0;
  padding-left: 20px;
}

.fs-block__list li + li {
  margin-top: 4px;
}

.fs-credibility-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--fs-muted);
  font-size: 13px;
}

.fs-credibility-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-credibility-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--fs-reading);
}

.fs-credibility-legend__item--fact .fs-credibility-legend__swatch {
  background: var(--fs-fact);
}

.fs-credibility-legend__item--advice .fs-credibility-legend__swatch {
  background: var(--fs-advice);
}

/* ═══════════════════ 타입 라벨名片 fs-type-card ═══════════════════ */

.fs-type-card {
  --fs-type-border: var(--fs-line);
  display: flex;
  overflow: hidden;
  margin: 0 0 20px;
  border: 2px solid var(--fs-type-border);
  border-radius: var(--fs-radius);
  background: var(--fs-card);
  box-shadow: var(--fs-shadow);
}

/* 徽章边框等级：色值集中为 token，模板可整体覆盖 */
:root {
  --fs-badge-bronze: #A9744F;
  --fs-badge-silver: #9AA3AD;
  --fs-badge-gold: #C9A227;
  --fs-badge-platinum: #7D8B99;
}

.fs-type-card--bronze {
  --fs-type-border: var(--fs-badge-bronze);
}

.fs-type-card--silver {
  --fs-type-border: var(--fs-badge-silver);
}

.fs-type-card--gold {
  --fs-type-border: var(--fs-badge-gold);
}

.fs-type-card--platinum {
  --fs-type-border: var(--fs-badge-platinum);
}

.fs-type-card__swatch {
  flex: 0 0 72px;
  background: var(--fs-el, var(--fs-primary));
}

.fs-type-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 18px 16px;
}

.fs-type-card__alias {
  margin: 0 0 4px;
  color: var(--fs-muted);
  font-size: 13px;
}

.fs-type-card__name {
  margin: 0 0 6px;
  font-size: 22px;
}

.fs-type-card__tagline {
  margin: 0 0 12px;
}

.fs-type-card__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.fs-type-card__keywords li {
  padding: 2px 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-surface);
  font-size: 13px;
}

.fs-type-card__metaphor {
  margin: 0;
  color: var(--fs-muted);
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .fs-type-card {
    flex-direction: column;
  }

  .fs-type-card__swatch {
    flex-basis: 12px;
  }
}

/* ═══════════════════ 能量曲线 fs-curve ═══════════════════ */

.fs-curve {
  margin: 0 0 24px;
}

.fs-curve__canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-card);
}

.fs-curve__img {
  display: block;
  width: 100%;
}

.fs-curve__frost {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--fs-curve-free, 40%);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fs-curve__lock {
  position: absolute;
  top: 50%;
  left: calc(var(--fs-curve-free, 40%) + (100% - var(--fs-curve-free, 40%)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(90%, 260px);
  transform: translate(-50%, -50%);
  text-align: center;
}

.fs-curve__lock-icon {
  position: relative;
  width: 22px;
  height: 18px;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--fs-text);
}

.fs-curve__lock-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -10px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--fs-text);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.fs-curve__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-touch);
  padding: 0 18px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-primary);
  color: var(--fs-primary-text);
  font-weight: 700;
  text-decoration: none;
}

.fs-curve__events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.fs-curve__event {
  display: inline-flex;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-pill);
  font-size: 13px;
}

.fs-curve__event-year {
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}

.fs-curve__form {
  margin: 12px 0 0;
}

.fs-curve__fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-sm);
}

.fs-curve__legend {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
}

.fs-curve__field {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.fs-curve__field input {
  width: 100%;
  min-height: var(--fs-touch);
  padding: 8px 10px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-bg);
  color: var(--fs-text);
}

.fs-curve__field:not(.fs-curve__field--grow) input {
  width: 96px;
}

.fs-curve__field--grow {
  flex: 1 1 180px;
}

.fs-curve__submit {
  min-height: var(--fs-touch);
  padding: 0 16px;
  border: 0;
  border-radius: var(--fs-radius-sm);
  background: var(--fs-primary);
  color: var(--fs-primary-text);
  font-weight: 700;
  cursor: pointer;
}

.fs-curve__note {
  margin: 6px 0 0;
  color: var(--fs-muted);
  font-size: 13px;
}

.fs-curve__disclaimer {
  margin: 8px 0 0;
  color: var(--fs-muted);
  font-size: 13px;
}

/* ═══════════════════ 天赋卡 fs-talent-cards（CSS 翻面，无随机、无星级） ═══════════════════ */

.fs-talent-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 72%);
  gap: 12px;
  margin: 0 0 24px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

@media (min-width: 576px) {
  .fs-talent-cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}

.fs-talent-card {
  min-height: 240px;
  border-radius: var(--fs-radius);
  perspective: 1000px;
  scroll-snap-align: start;
  cursor: pointer;
}

.fs-talent-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* 有脚本：点击 / Enter / 空格翻面（base.js 切换 is-flipped）；无脚本：聚焦或悬停翻面 */
.fs-talent-card.is-flipped .fs-talent-card__inner,
html:not(.fs-js) .fs-talent-card:focus-within .fs-talent-card__inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  html:not(.fs-js) .fs-talent-card:hover .fs-talent-card__inner {
    transform: rotateY(180deg);
  }
}

.fs-talent-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 16px;
  border: 1px solid var(--fs-line);
  border-radius: inherit;
  background: var(--fs-card);
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fs-talent-card__face--back {
  transform: rotateY(180deg);
}

.fs-talent-card__art {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fs-primary), var(--fs-accent));
}

.fs-talent-card__art--circle,
.fs-talent-card__art--ring {
  border-radius: 50%;
}

.fs-talent-card__art--ring {
  background: transparent;
  border: 12px solid var(--fs-primary);
}

.fs-talent-card__art--diamond {
  transform: rotate(45deg) scale(0.8);
}

.fs-talent-card__art--triangle {
  border-radius: 0;
  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
}

.fs-talent-card__art--hexagon {
  border-radius: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.fs-talent-card__art--arc {
  height: 36px;
  border-radius: 72px 72px 0 0;
}

.fs-talent-card__art--bars {
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--fs-primary) 0 12px, transparent 12px 20px);
}

.fs-talent-card__name {
  margin: 0;
  font-size: 18px;
}

.fs-talent-card__line {
  margin: 0;
}

.fs-talent-card__meta {
  margin: 0;
  color: var(--fs-muted);
  font-size: 13px;
}

/* ═══════════════════ 分享套件 fs-share-card ═══════════════════ */

.fs-share-card {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-card);
}

.fs-share-card__previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .fs-share-card__previews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fs-share-card__preview {
  margin: 0;
}

.fs-share-card__preview img {
  display: block;
  width: 100%;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface);
}

.fs-share-card__preview--og {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .fs-share-card__preview--og {
    grid-column: auto;
  }
}

.fs-share-card__preview figcaption {
  margin-top: 4px;
  color: var(--fs-muted);
  font-size: 13px;
  text-align: center;
}

.fs-share-card__form {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.fs-share-card__frames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fs-share-card__frames legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

.fs-share-card__frame,
.fs-share-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--fs-touch);
  padding: 0 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-pill);
  cursor: pointer;
}

.fs-share-card__frame:has(input:checked) {
  border-color: var(--fs-primary);
  box-shadow: inset 0 0 0 1px var(--fs-primary);
}

.fs-share-card__apply,
.fs-share-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-touch);
  padding: 0 18px;
  border: 1px solid var(--fs-primary);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-card);
  color: var(--fs-primary);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fs-share-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.fs-share-card__action:first-child {
  background: var(--fs-primary);
  color: var(--fs-primary-text);
}

.fs-share-card__ai-note {
  margin: 0;
  color: var(--fs-muted);
  font-size: 13px;
}

/* ═══════════════════ 壁纸 fs-wallpaper-gallery ═══════════════════ */

.fs-wallpaper-gallery {
  margin: 0 0 24px;
}

.fs-wallpaper-gallery__color {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 16px;
}

.fs-wallpaper-gallery__swatch {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border: 1px solid var(--fs-line);
  border-radius: 50%;
}

.fs-wallpaper-gallery__color-name {
  font-size: 18px;
}

.fs-wallpaper-gallery__line {
  margin: 0;
  color: var(--fs-muted);
}

.fs-wallpaper-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .fs-wallpaper-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fs-wallpaper-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fs-wallpaper-gallery__item {
  display: grid;
  gap: 8px;
}

.fs-wallpaper-gallery__item figure {
  margin: 0;
}

.fs-wallpaper-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
}

.fs-wallpaper-gallery__item figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
  font-size: 14px;
}

.fs-wallpaper-gallery__price {
  color: var(--fs-muted);
}

.fs-wallpaper-gallery__unlock {
  margin: 0;
}

.fs-wallpaper-gallery__download,
.fs-wallpaper-gallery__unlock button,
.fs-wallpaper-gallery__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--fs-touch);
  padding: 0 12px;
  border: 1px solid var(--fs-primary);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-card);
  color: var(--fs-primary);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fs-wallpaper-gallery__next {
  width: auto;
  margin: 0 0 12px;
}

.fs-wallpaper-gallery__note {
  margin: 0;
  color: var(--fs-muted);
  font-size: 13px;
}

/* ═══════════════════ /today 区块 fs-today-block ═══════════════════ */

.fs-today-block {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-card);
}

.fs-today-block > :first-child {
  margin-top: 0;
}

.fs-today-block > :last-child {
  margin-bottom: 0;
}

/* ═══════════════════ 追问角色 fs-mascot ═══════════════════ */

.fs-mascot {
  margin: 0 0 20px;
}

.fs-mascot__card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fs-mascot__avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fs-surface);
}

.fs-mascot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.fs-mascot__name {
  font-size: 17px;
}

.fs-mascot__ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--fs-primary);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.fs-mascot__specialty {
  flex-basis: 100%;
  color: var(--fs-muted);
  font-size: 13px;
}

.fs-mascot__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.fs-mascot__option {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  padding: 0 14px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-text);
  font-size: 14px;
  text-decoration: none;
}

.fs-mascot__option[aria-current="true"] {
  border-color: var(--fs-primary);
  color: var(--fs-primary);
  font-weight: 700;
}

.fs-mascot__bubble:not(:empty) {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
}

.fs-mascot__bubble:not(:empty)::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 24px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: var(--fs-surface);
}

button.fs-mascot__option {
  background: var(--fs-card);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

button.fs-mascot__option:focus-visible,
.fs-mascot__close:focus-visible {
  outline: 3px solid var(--fs-focus);
  outline-offset: 2px;
}

.fs-mascot__line,
.fs-mascot__notice-text {
  margin: 0;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fs-mascot__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--fs-line);
}

.fs-mascot__notice:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fs-mascot__close {
  min-height: var(--fs-touch);
  padding: 0 14px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-pill);
  background: var(--fs-card);
  color: var(--fs-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* 答案气泡的角色小头像（ask.php）与账户页代表贴纸（mascot 贴纸装饰） */
.fs-mascot-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fs-surface);
  vertical-align: middle;
}

.fs-sticker {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* ═══════════════════ 底部固定 CTA fs-cta-bar（start / checkout / 预览解锁，15 号 §6） ═══════════════════ */

.fs-cta-bar {
  margin: 24px 0 0;
}

.fs-cta-bar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-cta-height);
  padding: 0 28px;
  border: 0;
  border-radius: 16px;
  background: var(--fs-primary);
  color: var(--fs-primary-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fs-cta-bar__note {
  margin: 8px 0 0;
  color: var(--fs-muted);
  font-size: 13px;
}

@media (max-width: 767.98px) {
  .fs-cta-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--fs-bg);
    box-shadow: 0 -1px 0 var(--fs-line), 0 -8px 24px rgba(17, 24, 39, 0.06);
  }

  .fs-cta-bar__button {
    width: 100%;
  }

  .fs-cta-bar__note {
    text-align: center;
  }

  /* 不遮挡内容：页面底部留出与 CTA 等高的空白 */
  body:has(.fs-cta-bar) {
    padding-bottom: calc(var(--fs-cta-height) + 24px + env(safe-area-inset-bottom));
  }

  .fs-cta-bar-spacer {
    height: calc(var(--fs-cta-height) + 24px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════ 内置骨架 fs-shell（保底模板也不可用时） ═══════════════════ */

.fs-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  background: var(--fs-bg);
  color: var(--fs-text);
}

.fs-shell__header,
.fs-shell__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  padding: 8px 0;
}

.fs-shell__footer {
  display: block;
  margin-top: 32px;
  border-top: 1px solid var(--fs-line);
}

.fs-shell__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.fs-shell__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fs-touch);
  padding: 0 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text);
  text-decoration: none;
}

.fs-shell__nav a[aria-current="page"] {
  border-color: var(--fs-primary);
  color: var(--fs-primary);
  font-weight: 700;
}

.fs-shell__main {
  min-height: 50vh;
}

.fs-shell__title {
  margin: 0 0 16px;
  font-size: 24px;
}

/* ═══════════════════ 动效与打印 ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  .fs-spinner,
  .fs-skeleton {
    animation: none;
  }

  .fs-talent-card__inner {
    transition: none;
  }
}

@media print {
  .fs-lang-switcher,
  .fs-cta-bar,
  .fs-share-card,
  .fs-curve__form,
  .fs-mascot__switch {
    display: none !important;
  }

  .fs-block,
  .fs-pillars,
  .fs-type-card {
    break-inside: avoid;
  }

  .fs-block,
  .fs-type-card {
    box-shadow: none;
  }
}

/* ═══════════════════ 结账页两档切换 fs-tier-switch（price_anchor） ═══════════════════ */

.fs-tier-switch {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-card);
  word-break: keep-all;
}

.fs-tier-switch__title {
  margin: 0 0 12px;
  font-size: 16px;
}

.fs-tier-switch__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-tier-switch__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-bg);
}

.fs-tier-switch__item.is-current {
  border-color: var(--fs-primary);
  box-shadow: inset 0 0 0 1px var(--fs-primary);
}

.fs-tier-switch__badge {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-accent);
  color: var(--fs-primary-text);
  font-size: 12px;
  font-weight: 700;
}

.fs-tier-switch__name {
  font-size: 15px;
}

.fs-tier-switch__summary {
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.6;
}

.fs-tier-switch__price {
  font-size: 17px;
  font-weight: 700;
}

.fs-tier-switch__coins {
  color: var(--fs-muted);
  font-size: 13px;
}

.fs-tier-switch__facts {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0 0 0 18px;
  color: var(--fs-fact);
  font-size: 13px;
}

.fs-tier-switch__current {
  align-self: flex-start;
  margin-top: 6px;
  color: var(--fs-primary);
  font-size: 13px;
  font-weight: 700;
}

.fs-tier-switch__form {
  margin: 6px 0 0;
}

.fs-tier-switch__button {
  min-height: var(--fs-touch);
  padding: 0 16px;
  border: 1px solid var(--fs-primary);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-card);
  color: var(--fs-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.fs-tier-switch__button:hover {
  background: var(--fs-surface);
}

.fs-tier-switch__button:focus-visible {
  outline: 3px solid var(--fs-focus);
  outline-offset: 2px;
}

.fs-tier-switch__note {
  margin: 10px 0 0;
  color: var(--fs-muted);
  font-size: 12px;
}

@media (min-width: 576px) {
  .fs-tier-switch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print {
  .fs-tier-switch {
    display: none !important;
  }
}

/* ═══════════════════ 内容正文（Markdown 白名单输出：p / br / strong / em / ul / li + fs-md-*，S12） ═══════════════════ */
/* 选择器带 [class] 提高特异性，压过模板 prose 容器的通用 p / ul 规则；外观仍可由模板用更具体的选择器覆盖 */

p.fs-md-h2[class] {
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fs-line);
  font-size: 18px;
  line-height: 1.4;
}

p.fs-md-h3[class] {
  margin: 20px 0 8px;
  font-size: 16px;
  line-height: 1.45;
}

p.fs-md-h2[class]:first-child,
p.fs-md-h3[class]:first-child {
  margin-top: 0;
}

ul.fs-md-ol[class] {
  list-style: decimal;
}

ul.fs-md-ol[class] ul.fs-md-ol[class] {
  list-style: lower-alpha;
}

p.fs-md-note[class] {
  margin: 0 0 1em;
  padding: 10px 14px;
  border-left: 3px solid var(--fs-line);
  border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
  background: var(--fs-surface);
  color: var(--fs-muted);
  font-size: 0.95em;
}

ul.fs-md-table[class] {
  margin: 0 0 1em;
  padding: 0;
  border-top: 1px solid var(--fs-line);
  list-style: none;
}

li.fs-md-row[class] {
  padding: 10px 0;
  border-bottom: 1px solid var(--fs-line);
  line-height: 1.7;
}

li.fs-md-row[class] em {
  color: var(--fs-muted);
  font-style: normal;
}