/* ヤマチョウシ ── 解説ページ /docs/ 用。app.css と peak.css の上に重ねる。
   ★ 値そのものは太く、注釈は小さく。数字を読ませるページなので、
     表は横スクロールを許して縮めない（読めない表より、スクロールする表）。 */

.dcard {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
}
.dcard.off { opacity: .72; }

.dcard .dh {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.dcard .dh .res {
  font-weight: 700; font-size: 15px;
  padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--bar);
}
.dcard .dh .gn { font-size: 13px; opacity: .85; }
.dcard .dh .tagoff {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .7;
}

.dcard .dstat {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--line);
}
.dcard .dstat .cell { padding: 10px 8px; background: var(--surface-1); }
.dcard .dstat .cell .k { font-size: 11px; opacity: .7; margin-bottom: 3px; }
.dcard .dstat .cell .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcard .dstat .cell .v small { font-size: 11px; font-weight: 400; opacity: .7; margin-left: 2px; }

.dcard .dbins { padding: 10px 14px 4px; }
.dcard .dbin {
  display: grid; grid-template-columns: 9.5em 1fr 10em;
  align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px;
}
.dcard .dbin .bl { opacity: .85; }
.dcard .dbin .bb {
  display: block; height: 10px; border-radius: 5px;
  background: var(--surface-2); overflow: hidden;
}
.dcard .dbin .bb i { display: block; height: 100%; background: var(--bar); }
.dcard .dbin .bn { text-align: right; font-variant-numeric: tabular-nums; opacity: .85; }

.dtable { overflow-x: auto; margin: 12px 0; }
.dtable table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; }
.dtable th, .dtable td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px; text-align: left; vertical-align: top;
}
.dtable thead th { font-size: 11px; opacity: .75; font-weight: 600; white-space: nowrap; }
.dtable th.num, .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .th2 { display: block; font-size: 10px; opacity: .6; font-weight: 400; }
.dtable td.nm a { font-weight: 700; text-decoration: none; }
.dtable td.nm a:hover { text-decoration: underline; }
.dtable td.nm .pf { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }
.dtable td.gap { font-weight: 700; }
.dtable td.rm { font-size: 12px; opacity: .85; }

.dtable.rates table { min-width: 520px; }
.dtable td.rate { font-size: 17px; font-weight: 700; }
.dtable td.rate .un { display: block; font-size: 10px; font-weight: 400; opacity: .65; }
.dtable td.rate .na { font-size: 12px; font-weight: 400; opacity: .7; }

ol.steps { margin: 10px 0 14px; padding-left: 1.35em; font-size: 13.5px; line-height: 1.85; }
ol.steps li { margin-bottom: 4px; }

.note.src2 { font-size: 11.5px; opacity: .8; line-height: 1.8; }

@media (max-width: 700px) {
  .dcard .dstat { grid-template-columns: repeat(2, 1fr); }
  .dcard .dbin { grid-template-columns: 8em 1fr; }
  .dcard .dbin .bn { grid-column: 2; text-align: left; }
}