/* 嘉圆 · 互动图与场景图示的公共样式（2026-10-22 新增）
 *
 * 设计原则：
 *  - 图本身只放数据，说明文字放在图外，用系统字体与既有设计令牌，不引入新颜色体系；
 *  - 控件集中在图的上方一行（滑块 → 读数 → 图），一次只动一个量，读者能看到因果；
 *  - 手机宽度下控件竖排，图随容器宽度重画，不出现横向滚动；
 *  - 尊重系统「减少动态效果」设置：不使用任何过渡动画。 */

.wg__tag { display:inline-block; vertical-align:middle; margin-left:var(--jy-space-2);
           font-size:var(--jy-text-xs); font-weight:700; color:var(--jy-red-600);
           background:var(--jy-red-50); border-radius:var(--jy-radius-pill); padding:2px 10px; }
.wg__lead { margin:var(--jy-space-3) 0 var(--jy-space-4); line-height:var(--jy-leading); }
.wg__lead b { color:var(--jy-ink-900); }

.wg__ctrl { display:grid; gap:var(--jy-space-3); padding:var(--jy-space-4); margin-bottom:var(--jy-space-4);
            background:var(--jy-paper); border:1px solid var(--jy-line); border-radius:var(--jy-radius-md); }
.wg__row { display:grid; grid-template-columns:1fr; gap:var(--jy-space-1); min-width:0; }
.wg__row label { font-size:var(--jy-text-sm); font-weight:700; color:var(--jy-ink-900); }
.wg__sub { display:inline-block; margin-left:var(--jy-space-2); font-size:var(--jy-text-xs);
           font-weight:400; color:var(--jy-ink-700); }
.wg__row output { font-size:var(--jy-text-sm); color:var(--jy-ink-900); min-height:1.4em; }
.wg__row input[type="range"] { width:100%; min-width:0; accent-color:var(--jy-red-600); margin:var(--jy-space-1) 0;
                               height:28px; }
.wg__row input[type="range"]:focus-visible { outline:2px solid var(--jy-teal-600); outline-offset:2px; }
.wg__row input[type="range"]:disabled { opacity:.45; }
.wg__chk { display:flex !important; align-items:flex-start; gap:var(--jy-space-2); font-weight:400 !important; cursor:pointer; }
.wg__chk input { margin-top:3px; width:18px; height:18px; accent-color:var(--jy-red-600); flex:none; }
.wg__chk input:focus-visible { outline:2px solid var(--jy-teal-600); outline-offset:2px; }
.wg__btns { display:flex; flex-wrap:wrap; gap:var(--jy-space-2); }
.wg__btn { min-height:44px; }

@media (min-width:720px) {
  .wg__row:not(.wg__row--chk) { grid-template-columns:150px 1fr 150px; align-items:center; gap:var(--jy-space-3); }
  .wg__row:not(.wg__row--chk) output { text-align:left; }
}

.wg__out { padding:var(--jy-space-4); margin-bottom:var(--jy-space-4); background:var(--jy-gold-100);
           border-radius:var(--jy-radius-md); }
.wg__out p { margin:0 0 var(--jy-space-3); line-height:var(--jy-leading); }
.wg__out p:last-child { margin-bottom:0; }
.wg__out b { color:var(--jy-ink-900); }

.wg__h { font-size:var(--jy-text-md); margin:var(--jy-space-5) 0 var(--jy-space-2); color:var(--jy-ink-900); }
.wg__chart { width:100%; min-width:0; }
.wg__chart svg { display:block; max-width:100%; font-family:var(--jy-font-sans); }
.wg__chart--rel { position:relative; }
.wg__none { margin:0; padding:var(--jy-space-4); background:var(--jy-paper); border-radius:var(--jy-radius-md);
            line-height:var(--jy-leading); }

.wg__tip { position:absolute; z-index:2; pointer-events:none; min-width:150px; max-width:220px;
           background:var(--jy-surface); border:1px solid var(--jy-line); border-radius:var(--jy-radius-sm);
           padding:var(--jy-space-2) var(--jy-space-3); font-size:var(--jy-text-xs); line-height:1.6;
           color:var(--jy-ink-700); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.wg__tip[hidden] { display:none; }
.wg__tip b { color:var(--jy-ink-900); font-size:var(--jy-text-sm); }
.wg__tip-h { font-weight:700; color:var(--jy-ink-900); margin-bottom:2px; }

.wg__details { margin-top:var(--jy-space-4); }
.wg__details summary { cursor:pointer; font-size:var(--jy-text-sm); color:var(--jy-teal-600); font-weight:700;
                       min-height:32px; display:flex; align-items:center; }
.wg__details summary:focus-visible { outline:2px solid var(--jy-teal-600); outline-offset:2px; }
.wg__tbl { overflow-x:auto; margin-top:var(--jy-space-2); }
.wg__tbl table { border-collapse:collapse; width:100%; font-size:var(--jy-text-sm); }
.wg__tbl th, .wg__tbl td { border-bottom:1px solid var(--jy-line); padding:var(--jy-space-2); text-align:left;
                           vertical-align:top; }
.wg__tbl th { color:var(--jy-ink-700); font-weight:700; font-size:var(--jy-text-xs); }
.wg__tbl td { font-variant-numeric:tabular-nums; }
@media (max-width:560px) {
  /* 窄屏：每一行改为竖排的小卡片，不用左右滑动 */
  .wg__tbl thead { display:none; }
  .wg__tbl table, .wg__tbl tbody, .wg__tbl tr, .wg__tbl td { display:block; width:100%; }
  .wg__tbl tr { border:1px solid var(--jy-line); border-radius:var(--jy-radius-sm); margin-bottom:var(--jy-space-2);
                padding:var(--jy-space-2) var(--jy-space-3); background:var(--jy-surface); }
  .wg__tbl td { border:0; padding:2px 0; }
  .wg__tbl td:nth-child(1)::before { content:"资产价格变化　"; color:var(--jy-ink-700); font-size:var(--jy-text-xs); }
  .wg__tbl td:nth-child(2)::before { content:"不加杠杆　"; color:var(--jy-ink-700); font-size:var(--jy-text-xs); }
  .wg__tbl td:nth-child(3)::before { content:"加杠杆　"; color:var(--jy-ink-700); font-size:var(--jy-text-xs); }
  .wg__tbl td:nth-child(4)::before { content:"维持担保比例　"; color:var(--jy-ink-700); font-size:var(--jy-text-xs); }
}
.wg__note { margin:var(--jy-space-4) 0 0; font-size:var(--jy-text-sm); color:var(--jy-ink-700);
            line-height:var(--jy-leading); }
.wg__note b { color:var(--jy-ink-900); }
.wg__review { margin:var(--jy-space-3) 0 0; font-size:var(--jy-text-xs); color:var(--jy-ink-700); }

/* ---------- 事件页：头图与「比例图」 ---------- */
.sceneart { margin:0 0 var(--jy-space-5); border-radius:var(--jy-radius-lg); overflow:hidden;
            background:var(--jy-paper); border:1px solid var(--jy-line); }
.sceneart img { display:block; width:100%; height:auto; }
.sceneart figcaption { padding:var(--jy-space-2) var(--jy-space-4); font-size:var(--jy-text-xs);
                       color:var(--jy-ink-700); border-top:1px solid var(--jy-line); background:var(--jy-surface); }

.unit { margin:0 0 var(--jy-space-5); padding:var(--jy-space-5); background:var(--jy-surface);
        border:1px solid var(--jy-line); border-radius:var(--jy-radius-lg); }
.unit__hero { display:flex; align-items:baseline; gap:var(--jy-space-3); flex-wrap:wrap; margin:0 0 var(--jy-space-2); }
.unit__num { font-size:48px; line-height:1; font-weight:700; color:var(--jy-red-600); }
.unit__t { font-size:var(--jy-text-md); font-weight:700; color:var(--jy-ink-900); }
.unit__grid { display:grid; grid-template-columns:repeat(31,minmax(0,1fr)); gap:3px; margin:var(--jy-space-4) 0 var(--jy-space-3); }
.unit__grid i { display:block; aspect-ratio:1/1; border-radius:2px; background:#E8968D; }
.unit__grid i:first-child { background:#0E9484; }
.unit__legend { display:flex; flex-wrap:wrap; gap:var(--jy-space-2) var(--jy-space-4); font-size:var(--jy-text-sm);
                color:var(--jy-ink-900); margin:0 0 var(--jy-space-3); }
.unit__legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:2px;
                             margin-right:6px; vertical-align:-1px; background:var(--k); }
.unit__take { margin:0; line-height:var(--jy-leading); color:var(--jy-ink-900); }
.unit__src { margin:var(--jy-space-2) 0 0; font-size:var(--jy-text-xs); color:var(--jy-ink-700); }
.unit__tag { font-size:var(--jy-text-xs); font-weight:700; color:var(--jy-red-600); background:var(--jy-red-50);
             border-radius:var(--jy-radius-pill); padding:2px 10px; }
@media (max-width:560px) { .unit { padding:var(--jy-space-4); } .unit__num { font-size:40px; } .unit__grid { gap:2px; } }

/* ---------- 首页首屏配图 ---------- */
/* 电脑端放右栏顶部，手机端放在按钮之后；两处用同一张图，同一时刻只显示一处。 */
.story__art { margin:0 0 var(--jy-space-5); border-radius:var(--jy-radius-lg); overflow:hidden; background:var(--jy-paper);
              border:1px solid var(--jy-line); }
.story__art img { display:block; width:100%; height:auto; }
.story__art--d { display:none; }
.story__art--m { margin-top:var(--jy-space-5); }
@media (min-width:900px) {
  .story__art--d { display:block; }
  .story__art--m { display:none; }
}
.story__art[hidden] { display:none; }