/* 作品の紹介ページ専用（見本・使い方・できること・仕組みなど）。トークンは tokens.css、共通部品は ds.css。 */

/* ---- 題の区画 ---- */
.lp-intro{
  padding-top: calc(var(--ds-header-h) + var(--ds-space-10));
}
.lp-intro__grid{
  display: grid;
  gap: var(--ds-space-8);
}
.lp-intro__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}
.lp-intro h1{
  margin-top: var(--ds-space-4);
  font-size: var(--ds-fs-h1);
  font-weight: var(--ds-fw-bold);
  line-height: 1.4;
}
.lead{
  margin-top: var(--ds-space-6);
  max-width: var(--ds-measure);
  font-size: var(--ds-fs-lead);
  font-weight: var(--ds-fw-medium);
  line-height: var(--ds-lh-body);
}
.lead + .lead{ margin-top: var(--ds-space-4); }
.lead a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ds-color-line-strong);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.terms{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin: var(--ds-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.terms li strong{ font-weight: var(--ds-fw-bold); white-space: nowrap; }
.ctas{ margin-top: var(--ds-space-8); }
.lp-scene{
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--ds-work-wash);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}
.lp-scene svg{ width: 60%; height: auto; }

/* ---- 大きいパネルの中身（読む幅 760px） ---- */
.lp-body{ margin-top: var(--ds-heading-gap); }
.block + .block,
.block + .note,
.note + .block{ margin-top: var(--ds-space-12); }
.block h2{
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-heading);
}
.block > h2 + *{ margin-top: var(--ds-space-4); }
.block > p, .block li{
  color: var(--ds-color-ink-soft);
}
.block ol, .block ul{ padding-left: 1.2em; }
.block li + li{ margin-top: var(--ds-space-2); }
.block a{
  color: var(--ds-color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ds-color-line-strong);
  text-underline-offset: 4px;
  white-space: nowrap;
}
@media (hover: hover){
  .block a:hover, .lead a:hover{ text-decoration-color: currentColor; }
}

/* 見本: 入れるもの → 出てくるもの */
.sample{
  display: grid;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-6);
}
.sample-in, .sample-out{
  min-width: 0;
  padding: var(--ds-space-6);
  background: var(--ds-color-surface-sunken);
  border-radius: var(--ds-radius-lg);
}
.sample-out{ box-shadow: inset 0 3px 0 var(--ds-work-accent); }
.sample-label{
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-color-ink-faint);
  font-size: var(--ds-fs-small);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-ja-small);
}
.sample-in p.say{ color: var(--ds-color-ink); font-size: 16px; }
.sample-in dl{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-space-1) var(--ds-space-4);
  margin: 0;
}
.sample-in dt{ color: var(--ds-color-ink-soft); }
.sample-in dd{ margin: 0; color: var(--ds-color-ink); }
.sample-arrow{
  justify-self: center;
  color: var(--ds-color-ink);
  font-size: 18px;
  line-height: 1;
}
.sample-arrow::before{ content: "↓"; }
.table-scroll{ overflow-x: auto; }
.sample table{
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 13px;
}
.sample th, .sample td{
  padding: var(--ds-space-2) var(--ds-space-3);
  vertical-align: middle;
  text-align: left;
  border-bottom: var(--ds-border);
  color: var(--ds-color-ink);
}
.sample th{
  background: var(--ds-color-surface);
  color: var(--ds-color-ink-faint);
  font-size: 12px;
  font-weight: var(--ds-fw-bold);
  white-space: nowrap;
}
.sample td.num, .sample th.num{
  text-align: right;
  font-family: var(--ds-font-en);
  font-variant-numeric: tabular-nums;
}
.sample .out-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.sample .out-list li{
  margin: 0;
  padding: var(--ds-space-2) 0;
  border-bottom: var(--ds-border);
  color: var(--ds-color-ink);
}
.sample .out-list li:last-child{ border-bottom: 0; }
.sample .out-list li:has(.tag){
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: var(--ds-space-3);
}
.sample .out-list .tag{
  color: var(--ds-color-ink);
  font-size: var(--ds-fs-small);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-ja-small);
}
.sample .readout{
  font-family: var(--ds-font-mono);
  font-size: 14px;
  color: var(--ds-color-ink);
}
.sample-note{
  margin: var(--ds-space-1) 0 0;
  color: var(--ds-color-ink-soft);
  font-size: var(--ds-fs-small);
}

/* 使い方 */
.steps{
  counter-reset: step;
  margin-top: var(--ds-space-4);
  padding: 0;
  list-style: none;
}
.block .steps li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-space-4);
  margin: 0;
  padding: var(--ds-space-4) 0;
  border-top: var(--ds-border);
  color: var(--ds-color-ink);
}
.steps li:last-child{ border-bottom: var(--ds-border); }
.steps li::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  align-self: start;
  padding: 2px var(--ds-space-2);
  background: var(--ds-color-surface-sunken);
  border-radius: var(--ds-radius-xs);
  font-family: var(--ds-font-en);
  font-size: var(--ds-fs-label);
  font-weight: var(--ds-fw-bold);
  line-height: 1.7;
  letter-spacing: var(--ds-ls-en);
}
.steps strong{ display: block; font-weight: var(--ds-fw-bold); }
.steps span{ display: block; color: var(--ds-color-ink-soft); }

/* できること（内側の余白はどのページも同じ） */
.cards{
  display: grid;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-6);
}
.card{
  padding: var(--ds-space-5) var(--ds-space-6);
  background: var(--ds-color-surface-sunken);
  border-radius: var(--ds-radius-md);
}
.card .kind{
  margin: 0;
  color: var(--ds-color-ink-faint);
  font-size: var(--ds-fs-small);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-ja-small);
}
.card h3{
  margin-top: var(--ds-space-1);
  font-size: var(--ds-fs-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-tight);
}
.card p:not(.kind){
  margin-top: var(--ds-space-2);
  color: var(--ds-color-ink-soft);
}

/* 仕組み（技術のピル） */
.block .stack{
  margin-top: var(--ds-space-4);
  padding: 0;
}
.block .stack li{ margin: 0; color: var(--ds-color-ink); }

.note{
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-color-surface-sunken);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-ink-soft);
  font-size: var(--ds-fs-small);
}

/* 読み終えた位置にもう一度入口を置く */
.lp-closing{ margin-top: var(--ds-heading-gap); }
.lp-closing__inner{ text-align: center; }
.lp-closing p{
  font-size: var(--ds-fs-h2);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-heading);
  text-wrap: balance;
}
.lp-closing .ds-actions{ justify-content: center; margin-top: var(--ds-space-8); }

/* ほかのサイト（全件。列数は仕様書 5.2） */
.others{ margin-top: var(--ds-section-gap); }
.others h2{
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-heading);
}
.others ul{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-4);
  margin: var(--ds-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.others a{
  display: block;
  height: 100%;
  padding: var(--ds-space-4);
  background: var(--ds-color-surface);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-ink);
  text-decoration: none;
}
.others strong{
  display: block;
  font-size: var(--ds-fs-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-tight);
}
.others span{
  display: block;
  margin-top: var(--ds-space-1);
  color: var(--ds-color-ink-soft);
  font-size: var(--ds-fs-small);
}
@media (hover: hover){
  .others a:hover strong{ text-decoration: underline; text-underline-offset: 4px; }
}

@media (min-width: 640px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others ul{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  .lp-intro__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-16);
    align-items: center;
  }
  .block + .block,
  .block + .note,
  .note + .block{ margin-top: var(--ds-space-16); }
  .block > h2 + *{ margin-top: var(--ds-space-6); }
  .sample{
    grid-template-columns: minmax(0, 4fr) auto minmax(0, 8fr);
    align-items: center;
  }
  .sample-arrow::before{ content: "→"; }
  .sample-note{ grid-column: 1 / -1; }
  .others ul{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}