/* ============================================================
   SEO診断ツールページ固有CSS — diagnosis.html
   （共通分は common/css/common.css を参照。色・角丸・影は既存トークンのみ）
   ok  = sky（青）／warn = tangerine・tan（橙）／na = ink-soft（グレー）
   ============================================================ */
main [id]{ scroll-margin-top:100px; }

/* ============================================================
   sections（simulator.css / price.css と同じ定義を踏襲）
   ============================================================ */
.sec{ padding:clamp(56px, 8vw, 96px) 0; }
.sec--paper{ background:var(--paper); }
.sec--cream{ background:var(--cream); }

.diag{ max-width:760px; margin-inline:auto; }
.diag [hidden]{ display:none; }

/* ---------- JS無効時 ---------- */
.diag-noscript{
  background:var(--tan-pale);
  border:2px solid var(--ink);
  border-radius:18px;
  padding:24px clamp(20px, 3vw, 30px);
  display:grid;
  justify-items:start;
  gap:16px;
}
.diag-noscript p{ font-size:.95rem; }

/* ============================================================
   入力フォーム
   ============================================================ */
.diag-form{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(22px, 3.5vw, 34px);
  display:grid;
  gap:12px;
}
.diag-label{
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.04em;
}
.diag-input-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
}
.diag-input{
  flex:1 1 260px;
  min-width:0;
  font-family:inherit;
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:14px 16px;
  transition:box-shadow .2s var(--ease-pop);
}
.diag-input::placeholder{ color:var(--ink-soft); font-weight:500; }
.diag-input:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--tan-pale);
}
.diag-input:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}
.diag-form .btn{ flex:0 0 auto; }
.diag-hint{
  font-size:.85rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}
.diag-inline-error{
  font-size:.9rem;
  font-weight:700;
  color:var(--tan-deep);
  background:var(--tan-pale);
  border-radius:12px;
  padding:10px 14px;
}

/* ---------- 信頼の一言 ---------- */
.diag-trust{
  margin-top:20px;
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.85;
  word-break:auto-phrase;
  padding-left:1.1em;
  position:relative;
}
.diag-trust::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--sky);
}

/* ============================================================
   読み込み中
   ============================================================ */
.diag-loading{
  margin-top:clamp(26px, 4vw, 36px);
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--sky-pale);
  border-radius:16px;
  padding:18px 22px;
  font-size:.95rem;
  font-weight:700;
  color:var(--sky-deep);
}
.diag-spinner{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border:3px solid var(--sky);
  border-top-color:transparent;
  border-radius:50%;
  animation:diagSpin .7s linear infinite;
}
@keyframes diagSpin{ to{ transform:rotate(360deg); } }

/* ============================================================
   取得エラー
   ============================================================ */
.diag-error{
  margin-top:clamp(26px, 4vw, 36px);
  background:var(--tan-pale);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:0 3px 0 var(--ink);
  padding:clamp(20px, 3vw, 28px);
  display:grid;
  gap:8px;
}
.diag-error-t{
  font-size:1.05rem;
  font-weight:900;
  color:var(--tan-deep);
}
.diag-error-msg{
  font-size:.95rem;
  word-break:auto-phrase;
}
.diag-error-cta{ margin-top:6px; }

/* ============================================================
   結果
   ============================================================ */
.diag-result{ animation:diagIn .5s var(--ease-pop) both; }
.diag-result[hidden]{ display:none; }
@keyframes diagIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.diag-result-t{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); }
.diag-result-t:focus{ outline:none; }
.diag-result-t:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:4px;
  border-radius:6px;
}
.diag-checked-url{
  margin-top:8px;
  font-size:.85rem;
  color:var(--ink-soft);
  word-break:break-all;
}

/* ---------- スコア ---------- */
.diag-score{
  margin-top:clamp(22px, 3.5vw, 30px);
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(22px, 3.5vw, 32px);
  display:grid;
  gap:14px;
}
.diag-score-num{
  display:flex;
  align-items:baseline;
  gap:4px;
}
.diag-score-value{
  font-size:clamp(2.6rem, 8vw, 3.8rem);
  font-weight:900;
  line-height:1;
  font-feature-settings:"tnum" 1;
  color:var(--tan-deep);
}
.diag-score-max{
  font-size:1.1rem;
  font-weight:900;
  color:var(--ink-soft);
}
/* スコア帯（トークンのみ）: 高=sky / 中=tangerine / 低=tan-deep */
.diag-score.is-good  .diag-score-value{ color:var(--sky-deep); }
.diag-score.is-good  .diag-score-fill{ background:var(--sky); }
.diag-score.is-mid   .diag-score-value{ color:var(--tangerine); }
.diag-score.is-mid   .diag-score-fill{ background:var(--tangerine); }
.diag-score.is-low   .diag-score-value{ color:var(--tan-deep); }
.diag-score.is-low   .diag-score-fill{ background:var(--tan-deep); }

.diag-score-bar{
  height:12px;
  border-radius:999px;
  background:var(--tan-pale);
  border:2px solid var(--ink);
  overflow:hidden;
}
.diag-score-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--tangerine);
  border-radius:999px;
  transition:width .8s var(--ease-pop);
}
@media (prefers-reduced-motion: reduce){
  .diag-score-fill{ transition:none; }
}
.diag-summary{
  font-size:.98rem;
  font-weight:700;
  line-height:1.8;
  word-break:auto-phrase;
}

/* ---------- チェックのブロック ---------- */
.diag-block{ margin-top:clamp(28px, 4vw, 40px); }
.diag-block-t{
  font-size:1.15rem;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.diag-block-badge{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--sky-deep);
  background:var(--sky-pale);
  border:2px solid var(--sky-deep);
  border-radius:999px;
  padding:3px 12px;
}
.diag-block-badge--recruit{
  color:var(--tan-deep);
  background:var(--tan-pale);
  border-color:var(--tan-deep);
}
.diag-block-lead{
  margin-top:10px;
  font-size:.9rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

/* ---------- チェック1件 ---------- */
.diag-checks{
  list-style:none;
  margin-top:16px;
  display:grid;
  gap:12px;
}
.diag-check{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:16px;
  box-shadow:0 3px 0 var(--ink);
  padding:16px clamp(16px, 2.5vw, 22px);
}
.diag-check-icon{
  grid-row:1 / span 3;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid var(--ink);
  font-size:1.1rem;
  font-weight:900;
  line-height:1;
}
.diag-check--ok   .diag-check-icon{ background:var(--sky-pale);  color:var(--sky-deep); }
.diag-check--warn .diag-check-icon{ background:var(--tan-pale);  color:var(--tan-deep); }
.diag-check--na   .diag-check-icon{ background:var(--cream);     color:var(--ink-soft); border-style:dashed; }

.diag-check--warn{ border-color:var(--tan-deep); }
.diag-check--na{ box-shadow:none; opacity:.9; }

.diag-check-head{
  grid-column:2;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.diag-check-label{
  font-size:1rem;
  font-weight:900;
}
.diag-check-badge{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  border-radius:999px;
  padding:2px 10px;
  border:2px solid currentColor;
}
.diag-check--ok   .diag-check-badge{ color:var(--sky-deep); }
.diag-check--warn .diag-check-badge{ color:var(--tan-deep); }
.diag-check--na   .diag-check-badge{ color:var(--ink-soft); }

.diag-check-found{
  grid-column:2;
  font-size:.86rem;
  color:var(--ink-soft);
  word-break:break-word;
}
.diag-check-found b{ color:var(--ink); font-weight:900; }
.diag-check-advice{
  grid-column:2;
  font-size:.92rem;
  line-height:1.8;
  word-break:auto-phrase;
}
.diag-check-why{
  grid-column:2;
  margin-top:4px;
  font-size:.82rem;
  color:var(--ink-soft);
  padding-left:.9em;
  position:relative;
  word-break:auto-phrase;
}
.diag-check-why::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--dash);
}

/* ---------- 結果CTA ---------- */
.diag-cta{
  margin-top:clamp(30px, 4vw, 44px);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(26px, 4vw, 38px);
  display:grid;
  justify-items:start;
  gap:12px;
}
.diag-cta-t{ font-size:clamp(1.2rem, 2.6vw, 1.5rem); }
.diag-cta p{
  font-size:.95rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}
.diag-cta .btn{ margin-top:10px; }

/* ---------- やり直し ---------- */
.diag-redo{
  margin-top:clamp(24px, 3.5vw, 34px);
  display:flex;
  justify-content:center;
}
.diag button.tlink{
  background:none;
  border:0;
  padding:0;
  font-family:inherit;
  font-size:.92rem;
  cursor:pointer;
}
.diag-disclaimer{
  margin-top:20px;
  font-size:.8rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}

/* ---------- 関連ページ導線 ---------- */
.diag-foot{
  margin-top:clamp(36px, 5vw, 52px);
  padding-top:clamp(24px, 3vw, 32px);
  border-top:2px dashed var(--dash);
  display:flex;
  flex-wrap:wrap;
  gap:8px 36px;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:480px){
  .diag-form .btn{ width:100%; justify-content:center; }
  .diag-cta .btn{ width:100%; }
  .diag-check{ grid-template-columns:auto 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .diag-result{ animation:none; }
  .diag-spinner{ animation-duration:1.4s; }
}