/* 試作の枠だけ。中身の見た目は detail.css / trials.css / simulation.css に従う。 */
.pd-body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;line-height:1.7}
.pd-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 20px;
  border-bottom:1px solid var(--line);font-size:.78rem;background:var(--surface)}
.pd-nav a{color:var(--accent)}
.pd-code{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--muted)}
.pd-target{color:var(--sec)}
.pd-main{max-width:820px;margin:0 auto;padding:28px 20px 90px}
.pd-main h1{font-size:1.3rem;margin:0 0 14px;line-height:1.5}
.pd-meta{margin:0 0 22px;font-size:.8rem;line-height:1.8;border-top:1px solid var(--grid)}
.pd-meta>div{display:grid;grid-template-columns:9em 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--grid)}
.pd-meta dt{font-weight:600;color:var(--sec)}
.pd-meta dd{margin:0}
.pd-meta b{background:#fdf6e3;font-weight:600;padding:0 2px}
.pd-src{font-size:.75rem;line-height:1.85;color:var(--sec);margin-top:26px;
  border-top:1px solid var(--grid);padding-top:12px}
.pd-src summary{cursor:pointer;color:var(--accent)}
.pd-src p{margin:8px 0}
.pd-fixed{margin:16px 0 4px;padding:12px 14px;background:var(--surface);border:1px solid var(--grid);font-size:.77rem;line-height:1.8}
.pd-fixed-h{margin:0 0 6px;font-weight:600;font-size:.77rem}
.pd-fixed-h span{float:right;font-weight:400;color:var(--muted);font-size:.7rem}
.pd-fixed ul,.pd-fixed ol{margin:6px 0;padding-left:1.3em}
.pd-fixed li{margin:3px 0}

/* 立場（cas-type）の一覧 */
.pd-cases{width:100%;border-collapse:collapse;font-size:.78rem;margin:14px 0}
.pd-cases th,.pd-cases td{padding:7px 8px;border-bottom:1px solid var(--grid);text-align:right;
  font-variant-numeric:tabular-nums}
.pd-cases th:first-child,.pd-cases td:first-child{text-align:left;font-variant-numeric:normal}
.pd-cases thead th{color:var(--sec);font-weight:600;border-bottom:1px solid var(--line);font-size:.72rem}
.pd-cases td small{display:block;color:var(--muted);font-size:.68rem;line-height:1.5}
.pd-ok{color:#1c5cab;font-weight:600}
.pd-ng{color:var(--e1);font-weight:600}
.pd-cases tr[data-late="1"]{background:#fdf1f0}

/* 共通時刻軸（閾値を線で描く） */
.pd-axis{position:relative;margin:20px 0 30px;padding-top:4px}
.pd-axis-ruler{position:relative;height:1.3em;font-size:.7rem;color:var(--sec)}
.pd-axis-ruler span{position:absolute;transform:translateX(-50%)}
.pd-lanes{position:relative;padding-top:6px}
.pd-now-full{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--accent)}
.pd-now-full b{position:absolute;bottom:-16px;left:4px;font-size:.68rem;color:var(--accent);white-space:nowrap}
.pd-lane{position:relative;height:30px;margin:4px 0;border-bottom:1px solid var(--grid)}
.pd-lane>span{position:absolute;top:3px;font-size:.72rem;white-space:nowrap;transform:translateX(-50%)}
.pd-thresh{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--e1)}
.pd-thresh b{position:absolute;top:-17px;left:3px;font-size:.68rem;color:var(--e1);white-space:nowrap}
.pd-now{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--accent)}
.pd-now b{position:absolute;top:-17px;left:3px;font-size:.68rem;color:var(--accent);white-space:nowrap}
.pd-span{position:absolute;height:9px;top:8px;background:#e1e0d9}
.pd-span.late{background:#f3c9c6}

/* 案の並置 */
.pd-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:620px){.pd-ab{grid-template-columns:1fr}}
.pd-card{border:1px solid var(--line);background:var(--surface);padding:12px 14px;font-size:.78rem;line-height:1.75}
.pd-card h4{margin:0 0 6px;font-size:.84rem}
.pd-card .pd-k{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--grid);padding:3px 0;font-variant-numeric:tabular-nums}
.pd-card.pinned{border-color:var(--accent);border-width:2px}

/* 被覆マップ・チェックリスト */
.pd-grid{width:100%;border-collapse:collapse;font-size:.76rem;margin:12px 0}
.pd-grid th,.pd-grid td{padding:7px 8px;border-bottom:1px solid var(--grid);vertical-align:top;text-align:left}
.pd-grid thead th{color:var(--sec);font-size:.71rem;border-bottom:1px solid var(--line)}
.pd-grid td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-bar{display:inline-block;height:9px;background:var(--e3);vertical-align:middle;margin-right:6px}
.pd-bar.has{background:var(--e5)}
.pd-tag{display:inline-block;font-size:.68rem;padding:1px 6px;border:1px solid var(--line);border-radius:2px;white-space:nowrap}
.pd-tag.yes{border-color:var(--e5);color:var(--e5)}
.pd-tag.no{border-color:var(--e1);color:var(--e1)}
.pd-tag.part{border-color:#a6791f;color:#a6791f}

/* 一覧ページ */
.pd-index h2{font-size:.86rem;margin:30px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.pd-list{list-style:none;margin:0;padding:0}
.pd-list li{border-bottom:1px solid var(--grid)}
.pd-list a{display:grid;grid-template-columns:3.4em 1fr;gap:12px;padding:11px 6px;text-decoration:none;color:inherit}
.pd-list a:hover{background:var(--surface)}
.pd-list .c{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--muted);padding-top:2px}
.pd-list .t{font-size:.87rem;font-weight:700;color:var(--accent)}
.pd-list .q{display:block;font-size:.76rem;color:var(--ink);margin-top:2px}
.pd-list .q::before{content:"答える問い: ";color:var(--muted);font-size:.7rem}
.pd-list .d{display:block;font-size:.74rem;color:var(--sec);margin-top:2px}
.pd-list .d::before{content:"いまとの違い: ";color:var(--muted);font-size:.7rem}

/* 狭い画面 */
.pd-scroll{max-width:100%;overflow-x:auto}
.pd-cases td strong,.pd-cases td small{white-space:nowrap}
@media(max-width:620px){
  .pd-main{padding:20px 14px 70px}
  .pd-main h1{font-size:1.12rem}
  .pd-meta>div{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .pd-scroll{overflow-x:auto}
  .pd-scroll>.pd-cases,.pd-scroll>.pd-grid{min-width:540px}
  .pd-nav{font-size:.72rem;padding:10px 14px}
  .pd-axis{margin:16px 0 34px}
  .pd-lane>span{font-size:.65rem}
}