/* certificate.css（2026-07-23新規／2026-07-26 UI刷新・実装4で学習編/実践編2トラック対応） — 修了証ページ
   QA指摘対応(HIGH: 修了証が存在しない)。印刷時は.cert-paperだけを残す設計。 */

/* 2026-07-26 UI刷新(実装4): 学習編/実践編の2トラックを横並びカードで見せる
   (レスポンシブでは1カラムに折返し)。 */
.cert-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4);margin:0 0 1.3em}
.cert-track{padding:1.2em 1.3em}
.cert-track-head{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-bottom:.9em}
.cert-track-title{margin:0;font-size:1.05rem;color:var(--color-navy)}
.cert-track-status{
  flex:none;font-size:.78rem;font-weight:800;padding:.3em .8em;border-radius:var(--radius-pill);
  background:var(--color-bg-section);color:var(--color-text-muted);
}
.cert-track.is-met .cert-track-status{background:var(--color-success);color:#fff}
.cert-track .cert-criteria-list{margin-bottom:0}

.cert-criteria-list{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-direction:column;gap:.7em}
.cert-criterion{display:flex;align-items:flex-start;gap:.8em;padding:.9em 1em;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.cert-criterion-dot{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:.1em;
  background:var(--color-bg-section);border:2px solid var(--color-border);position:relative;
}
.cert-criterion.is-met .cert-criterion-dot{background:var(--color-success);border-color:var(--color-success)}
.cert-criterion.is-met .cert-criterion-dot::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg);
}

.cert-status{padding:1.1em 1.3em;margin:1.3em 0}
.cert-status-text{margin:0 0 .6em;font-weight:700;color:var(--color-navy)}

.cert-preview-wrap{margin-top:var(--space-6)}
.cert-name-label{display:block;font-size:.88rem;font-weight:700;color:var(--color-navy);margin-bottom:1em}
.cert-name-input{
  display:block;width:100%;max-width:360px;margin-top:.4em;padding:.7em .9em;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;
}

.cert-paper{
  background:linear-gradient(180deg,#fff,var(--color-bg-section));
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:.5em;margin-bottom:1.3em;
}
.cert-paper-inner{
  border:2px solid var(--color-primary);border-radius:var(--radius-md);
  padding:2.6em 2em;text-align:center;
}
.cert-paper-kicker{
  font-size:.75rem;font-weight:800;letter-spacing:.28em;color:var(--color-accent);margin:0 0 .8em;
}
.cert-paper-site{
  font-family:var(--font-serif-index);font-size:1.8rem;color:var(--color-navy);margin:0 0 1.1em;
}
.cert-paper-body{max-width:520px;margin:0 auto 1.4em;color:var(--color-text);line-height:1.9}
.cert-paper-name{font-weight:800;color:var(--color-primary-dark);padding:0 .2em;border-bottom:2px solid var(--color-primary)}
.cert-paper-date{font-size:.85rem;color:var(--color-text-muted);margin:0 0 1.6em}
.cert-paper-foot{font-size:.72rem;color:var(--color-text-faint);margin:0}

@media print{
  .site-header,.sidebar,.sidebar-scrim,.rail,.site-footer,
  .breadcrumb,h1,.muted,.cert-tracks,.section-title,
  .cert-status,.cert-name-label,[data-cert-print]{display:none !important}
  .cert-preview-wrap,.cert-paper{margin:0}
  body,.app-main{background:#fff}
}