/* =====================================================
   求人安心チェッカー v2 — Claude Design Report/Dashboard
   claude.ai/design 準拠:
   - ivory #F7F5F3 / terracotta #D4714E / ink #2D2B2A
   - セリフ見出し + 小型キャップスのアイブロウラベル
   - フラットなカード・ヘアライン罫線・グラデーション/グロー不使用
   ===================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* --- Color tokens --- */
  --bg:#F7F5F3;
  --surface:#FFFFFF;
  --surface2:#F2EFEA;
  --surface3:#E8E4DD;
  --surface4:#D6D1C9;
  --ink:#2D2B2A;
  --ink-2:#3B3836;
  --text:#2D2B2A;--text-dim:#5D5955;--text-muted:#8C867F;
  --on-ink:#F5F1EC;--on-ink-dim:#B8B1A9;--on-ink-muted:#87817A;
  --accent:#D4714E;--accent-hover:#C15B3A;--accent-tint:rgba(212,113,78,.09);
  --safe:#2E8B57;--safe-tint:rgba(46,139,87,.08);
  --warn:#C4841D;--warn-tint:rgba(196,132,29,.08);
  --danger:#CC4B37;--danger-tint:rgba(204,75,55,.07);
  --info:#4A7EC4;--info-tint:rgba(74,126,196,.08);
  --purple:#7C5CBA;--purple-tint:rgba(124,92,186,.08);
  --border:rgba(45,43,42,.08);--border2:rgba(45,43,42,.12);
  /* --- Shape / elevation --- */
  --radius:14px;--radius-sm:10px;--radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(45,43,42,.04);
  /* --- Type --- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",sans-serif;
  --font-serif:Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  /* --- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 --- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-size:.9rem;
}
main.page{max-width:1160px;margin:0 auto;padding:0 var(--sp-5) var(--sp-8);position:relative;z-index:1}
button{font-family:inherit}
::selection{background:rgba(212,113,78,.22)}

/* =====================================================
   共通: アイブロウラベル（小型キャップス）
   ===================================================== */
.card-eyebrow{
  display:block;
  font-family:var(--font-sans);
  font-size:.64rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-muted);
  line-height:1.4;
}
.eyebrow-accent{color:var(--accent)}

/* =====================================================
   トップバー（ダークUI）
   ===================================================== */
.topbar{
  background:var(--ink);
  color:var(--on-ink);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;z-index:2;
}
.topbar-inner{
  max-width:1160px;margin:0 auto;
  padding:13px var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:32px;height:32px;flex-shrink:0;
  background:var(--accent);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.brand-text{
  font-family:var(--font-serif);
  font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  color:var(--on-ink);line-height:1.2;
  display:flex;flex-direction:column;
}
.brand-text small{
  font-family:var(--font-sans);
  font-size:.56rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--on-ink-muted);margin-top:3px;
}
.topbar-nav{display:flex;align-items:center;gap:var(--sp-4);flex-shrink:0}
.topbar-badge{
  font-size:.68rem;font-weight:600;
  padding:4px 12px;border-radius:100px;
  background:rgba(212,113,78,.16);color:#EDAA8A;
  border:1px solid rgba(212,113,78,.32);
  white-space:nowrap;
}
.topbar-link{
  font-size:.76rem;color:var(--on-ink-dim);text-decoration:none;
  transition:color .2s;white-space:nowrap;
}
.topbar-link:hover{color:var(--on-ink)}

/* =====================================================
   ヒーロー（エディトリアル）
   ===================================================== */
.hero{text-align:center;padding:var(--sp-7) 0 var(--sp-6)}
.hero-eyebrow{
  font-size:.66rem;font-weight:600;
  letter-spacing:.2em;
  color:var(--accent);
  margin-bottom:var(--sp-4);
}
.hero h1{
  font-family:var(--font-serif);
  font-size:clamp(2rem,4.4vw,2.9rem);
  font-weight:700;
  color:var(--text);
  letter-spacing:.005em;line-height:1.22;
}
.hero h1 span{color:var(--accent)}
.hero-lead{
  font-size:.94rem;color:var(--text-dim);
  max-width:580px;margin:var(--sp-4) auto 0;line-height:2;
}
.hero-stats{
  display:inline-flex;align-items:stretch;
  margin-top:var(--sp-6);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  flex-wrap:wrap;justify-content:center;
}
.hero-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 34px;
}
.hero-stat + .hero-stat{border-left:1px solid var(--border)}
.hero-stat b{
  font-family:var(--font-serif);
  font-size:1.6rem;color:var(--text);font-weight:700;line-height:1.2;
}
.hero-stat b i{font-style:normal;font-size:1rem;color:var(--text-dim)}
.hero-stat span{
  font-size:.68rem;color:var(--text-muted);
  letter-spacing:.12em;
}

/* =====================================================
   ダッシュボードグリッド
   ===================================================== */
.dashboard{
  display:grid;
  grid-template-columns:minmax(330px,400px) minmax(0,1fr);
  grid-template-areas:"input results" "history results" ". results";
  grid-template-rows:auto auto 1fr;
  gap:var(--sp-5);
  align-items:start;
}
.col-input{grid-area:input;min-width:0}
.col-results{grid-area:results;min-width:0;counter-reset:rsec}
.results-empty{grid-column:2;grid-row:1}
#historySection{grid-area:history;min-width:0}

/* 結果カラム内のカード間隔（#results は JS が display:block を直接設定するため flex/gap は使わない） */
.col-results > *{margin-bottom:var(--sp-4)}
.col-results > *:last-child{margin-bottom:0}
.col-results > div:empty{margin-bottom:0}

/* レポート表示時の入場アニメーション（display:none→block で再生される） */
#results[style*="block"]{animation:reportIn .45s ease both}
@keyframes reportIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* 空状態（診断後は #results の inline display:block を検知して非表示） */
#results[style*="block"] ~ .results-empty{display:none}
.results-empty{
  border:1px dashed var(--border2);
  border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-6);text-align:center;
  color:var(--text-muted);
  background:rgba(255,255,255,.5);
}
.results-empty .card-eyebrow{margin-bottom:var(--sp-3)}
.results-empty-title{
  font-family:var(--font-serif);
  font-size:1.3rem;font-weight:700;color:var(--text-dim);
  margin-bottom:var(--sp-3);
}
.results-empty-desc{font-size:.84rem;line-height:2}
.results-empty-steps{
  display:flex;justify-content:center;gap:var(--sp-5);
  margin-top:var(--sp-5);flex-wrap:wrap;
}
.results-empty-steps span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;color:var(--text-dim);
}
.results-empty-steps i{
  font-style:normal;
  font-family:var(--font-serif);font-weight:700;
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--border2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;color:var(--accent);
  background:var(--surface);
}

/* =====================================================
   カード共通（フラット・ヘアライン）
   ===================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-header{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);
}
.card-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.card-header h2{
  font-family:var(--font-serif);
  font-size:1.04rem;font-weight:700;color:var(--text);
  line-height:1.4;letter-spacing:.01em;
}
.card-body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}

/* レポートセクション自動採番（display:none のカードは採番されない） */
.report-sec{counter-increment:rsec}
.section-num{
  width:30px;height:30px;flex-shrink:0;
  border:1px solid var(--border2);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);
  align-self:flex-start;margin-top:2px;
}
.section-num::before{
  content:counter(rsec,decimal-leading-zero);
  font-family:var(--font-serif);
  font-size:.76rem;font-weight:700;color:var(--text-dim);
  letter-spacing:.02em;
}
/* セクションの重大度カラー（採番チップに反映） */
.sec-purple .section-num{background:var(--purple-tint);border-color:rgba(124,92,186,.25)}
.sec-purple .section-num::before{color:var(--purple)}
.sec-danger .section-num{background:var(--danger-tint);border-color:rgba(204,75,55,.25)}
.sec-danger .section-num::before{color:var(--danger)}
.sec-warn .section-num{background:var(--warn-tint);border-color:rgba(196,132,29,.25)}
.sec-warn .section-num::before{color:var(--warn)}
.sec-info .section-num{background:var(--info-tint);border-color:rgba(74,126,196,.25)}
.sec-info .section-num::before{color:var(--info)}
.sec-safe .section-num{background:var(--safe-tint);border-color:rgba(46,139,87,.25)}
.sec-safe .section-num::before{color:var(--safe)}

/* =====================================================
   入力パネル（フォーム）
   ===================================================== */
.input-card{border-color:rgba(212,113,78,.28)}
.input-card .card-header{background:var(--accent-tint);border-bottom-color:rgba(212,113,78,.14);border-radius:var(--radius) var(--radius) 0 0}
.input-card .card-eyebrow{color:var(--accent)}
.input-free-badge{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;
  padding:3px 11px;border-radius:100px;
  background:var(--surface);color:var(--accent);
  border:1px solid rgba(212,113,78,.35);
}
.field-label{
  font-size:.72rem;font-weight:600;color:var(--text-dim);
  margin-bottom:var(--sp-2);letter-spacing:.04em;
}
.sample-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.sample-btn{
  padding:7px 14px;border-radius:100px;font-size:.76rem;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s;
  display:flex;align-items:center;gap:5px;
  border:1px solid var(--border2);background:var(--surface);color:var(--text-dim);
}
.sample-btn::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sample-black{color:var(--danger);border-color:rgba(204,75,55,.3)}
.sample-black::before{background:var(--danger)}
.sample-black:hover{background:var(--danger-tint)}
.sample-gray{color:#A87418;border-color:rgba(196,132,29,.3)}
.sample-gray::before{background:var(--warn)}
.sample-gray:hover{background:var(--warn-tint)}
.sample-white{color:var(--safe);border-color:rgba(46,139,87,.3)}
.sample-white::before{background:var(--safe)}
.sample-white:hover{background:var(--safe-tint)}

textarea{
  width:100%;min-height:200px;padding:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--text);font-size:.88rem;line-height:1.75;
  resize:vertical;transition:border-color .2s,box-shadow .2s;
  font-family:inherit;
}
textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,113,78,.15);
}
textarea::placeholder{color:var(--text-muted);font-size:.82rem}
.input-error{
  background:var(--danger-tint);color:var(--danger);
  border:1px solid rgba(204,75,55,.22);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:.8rem;margin-top:var(--sp-3);
  display:flex;align-items:center;gap:8px;line-height:1.6;
}
.input-note{
  display:flex;align-items:flex-start;gap:7px;
  margin-top:var(--sp-2);font-size:.7rem;color:var(--text-muted);
  line-height:1.65;padding:0 2px;
}
.input-note svg{flex-shrink:0;margin-top:3px}
.input-note.note-safe svg{color:var(--safe)}

.optional-fields{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.optional-field{flex:1;min-width:140px}
.optional-field label{
  display:block;font-size:.72rem;color:var(--text-dim);
  margin-bottom:var(--sp-1);font-weight:600;letter-spacing:.04em;
}
.optional-field input{
  width:100%;padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--text);font-size:.86rem;
  transition:border-color .2s,box-shadow .2s;
  font-family:inherit;
}
.optional-field input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(212,113,78,.15);
}
.optional-field input::placeholder{color:var(--text-muted);font-size:.8rem}
.optional-field .field-hint{font-size:.64rem;color:var(--text-muted);margin-top:3px}

/* 診断ボタン（フラット・プライマリ） */
.btn-analyze{
  width:100%;padding:15px;margin-top:var(--sp-4);
  background:var(--accent);
  color:#fff;font-size:.98rem;font-weight:700;
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s;
}
.btn-analyze:hover{background:var(--accent-hover)}
.btn-analyze:active{transform:translateY(1px)}
.btn-analyze:disabled{opacity:.55;cursor:not-allowed}
.btn-analyze svg{width:18px;height:18px;fill:#fff}

/* =====================================================
   レポートカバー（スコアサマリー）
   ===================================================== */
.report-cover{
  border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-5) var(--sp-5);
  border-top:3px solid var(--accent);
}
.report-cover-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-4);flex-wrap:wrap;
}
.report-cover-note{font-size:.68rem;color:var(--text-muted);letter-spacing:.04em}
.report-company{
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--border);
}
.report-company-label{
  font-size:.66rem;color:var(--text-muted);letter-spacing:.14em;
  margin-bottom:2px;
}
.report-company-name{
  font-family:var(--font-serif);
  font-size:1.45rem;font-weight:700;color:var(--text);
  line-height:1.35;
}
.report-verdict{
  display:flex;align-items:center;gap:var(--sp-5);
  margin-bottom:var(--sp-5);
}
.report-score{
  display:flex;align-items:baseline;flex-shrink:0;line-height:1;
  padding-right:var(--sp-5);
  border-right:1px solid var(--border);
}
.score-big-num{
  font-family:var(--font-serif);
  font-size:4.4rem;font-weight:700;
  line-height:1;letter-spacing:-.015em;
  color:var(--text);
  transition:color .4s;
}
.score-big-max{font-size:1.05rem;color:var(--text-muted);font-weight:600;margin-left:5px;font-family:var(--font-serif)}
.report-verdict-text{flex:1;min-width:0}
.score-title{
  font-family:var(--font-serif);
  font-size:1.5rem;font-weight:700;color:var(--text);
  margin-bottom:4px;letter-spacing:.01em;line-height:1.35;
}
.score-desc{font-size:.84rem;color:var(--text-dim);line-height:1.8}

/* スコアゲージ（判定区分に対応した4セグメント） */
.score-progress-wrap{margin-bottom:var(--sp-1)}
.score-progress-track{
  height:6px;border-radius:100px;position:relative;
  background:linear-gradient(90deg,
    rgba(46,139,87,.4) 0 20%,
    rgba(196,132,29,.4) 20% 45%,
    rgba(212,113,78,.45) 45% 70%,
    rgba(204,75,55,.5) 70% 100%);
}
.score-progress-indicator{
  position:absolute;top:-5px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:var(--shadow-sm);
  transition:left .6s cubic-bezier(.34,1.56,.64,1);
  transform:translateX(-50%);
}
.score-progress-labels{
  display:flex;justify-content:space-between;
  font-size:.64rem;color:var(--text-muted);margin-top:var(--sp-2);
  letter-spacing:.1em;
}
.boundary-note{
  font-size:.74rem;color:var(--warn);
  margin-top:var(--sp-3);line-height:1.7;
  padding:8px 12px;border-radius:var(--radius-sm);
  background:var(--warn-tint);
}
.report-divider{border-top:1px solid var(--border);margin:var(--sp-5) 0 var(--sp-4)}
.summary-caption{
  font-size:.64rem;font-weight:600;color:var(--text-muted);
  letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:var(--sp-3);
}

/* KPIサマリータイル（JS生成 .sum-item） */
.summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.sum-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 6px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .2s,border-color .2s;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--border2);
  text-align:center;
}
.sum-num{
  font-family:var(--font-serif);
  font-size:1.7rem;font-weight:700;line-height:1.15;
  color:var(--text);
}
.sum-label{font-size:.66rem;color:var(--text-muted);margin-top:2px;font-weight:600;letter-spacing:.1em}
.s-danger{border-top-color:var(--danger)}
.s-danger .sum-num{color:var(--danger)}
.s-danger:hover{background:var(--danger-tint)}
.s-warn{border-top-color:var(--warn)}
.s-warn .sum-num{color:var(--warn)}
.s-warn:hover{background:var(--warn-tint)}
.s-info{border-top-color:var(--info)}
.s-info .sum-num{color:var(--info)}
.s-info:hover{background:var(--info-tint)}
.s-good{border-top-color:var(--safe)}
.s-good .sum-num{color:var(--safe)}
.s-good:hover{background:var(--safe-tint)}

/* =====================================================
   レーダーチャート
   ===================================================== */
.radar-scale-note{font-size:.68rem;font-weight:400;color:var(--text-muted);white-space:nowrap}
.radar-body{display:flex;justify-content:center;padding:var(--sp-4) 0 var(--sp-5)}
#radarCanvas{max-width:100%;height:auto;aspect-ratio:1/1}

/* =====================================================
   スコア直後CTA（コールアウト）
   ===================================================== */
.score-cta{border-left:3px solid var(--danger)}
.score-cta-body{padding:var(--sp-4) var(--sp-5) var(--sp-3)}
.score-cta-message{font-size:.92rem;font-weight:700;color:var(--danger);margin-bottom:4px;line-height:1.6}
.score-cta-desc{font-size:.8rem;color:var(--text-dim);line-height:1.8;margin-bottom:var(--sp-3)}
.score-cta-buttons{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pr-note{padding:0 var(--sp-5) var(--sp-2);text-align:right;font-size:.64rem;color:var(--text-muted);letter-spacing:.08em}

/* =====================================================
   企業DB・コンボアラート（JS生成コールアウト）
   ===================================================== */
.company-alert{
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3);
  border:1px solid var(--border2);
  border-left:3px solid var(--purple);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;gap:var(--sp-3);align-items:flex-start;
  box-shadow:var(--shadow-sm);
}
.company-alert:last-child{margin-bottom:0}
.company-alert-icon{flex-shrink:0;padding-top:2px}
.company-alert-body{flex:1;min-width:0}
.company-alert-title{
  font-size:.92rem;font-weight:700;color:var(--purple);
  margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.company-alert-desc{font-size:.8rem;color:var(--text-dim);line-height:1.8}

.combo-alert{
  padding:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-2);
  border:1px solid var(--border2);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.combo-alert:last-child{margin-bottom:0}
.combo-alert-title,.combo-title{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:3px}
.combo-alert-desc,.combo-desc{font-size:.8rem;color:var(--text-dim);line-height:1.8}

/* =====================================================
   セクションカード（折りたたみ）
   ===================================================== */
.section-card{overflow:hidden}
.section-card .card-header{cursor:pointer;user-select:none}
.section-card .card-header:hover{background:var(--surface2)}
.collapse-toggle{
  background:none;
  border:1px solid var(--border);
  border-radius:100px;
  padding:4px 12px;
  color:var(--text-muted);
  font-size:.68rem;cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s;
}
.collapse-toggle:hover{border-color:var(--border2);color:var(--text-dim)}
.collapse-body{transition:max-height .35s ease}
.collapse-body.collapsed{max-height:0!important;overflow:hidden;padding:0}
.section-padding{padding:var(--sp-3) var(--sp-5) var(--sp-5)}

/* 検出フラグ（JS生成コールアウト） */
.flag-item{
  padding:12px 16px;border-radius:var(--radius-sm);
  margin-bottom:var(--sp-2);
  border:1px solid var(--border);
  border-left:3px solid var(--border2);
  background:var(--surface);
  animation:fadeInUp .3s ease both;
}
.flag-item.critical,.flag-item.severity-critical{border-left-color:var(--danger);background:var(--danger-tint)}
.flag-item.warning,.flag-item.severity-warning{border-left-color:var(--warn);background:var(--warn-tint)}
.flag-item.info,.flag-item.severity-info{border-left-color:var(--info);background:var(--info-tint)}
.flag-item.good,.flag-item.severity-good{border-left-color:var(--safe);background:var(--safe-tint)}
.flag-title{font-size:.87rem;font-weight:700;margin-bottom:3px;color:var(--text);line-height:1.6}
.flag-desc{font-size:.8rem;color:var(--text-dim);line-height:1.8}
.flag-law{
  font-size:.72rem;color:var(--text-muted);margin-top:6px;
  padding-top:6px;border-top:1px solid var(--border);cursor:pointer;
}
.flag-law-detail{
  font-size:.72rem;color:var(--text-dim);margin-top:4px;
  padding:8px 10px;background:var(--surface2);border-radius:6px;
  line-height:1.7;display:none;
}

/* バッジ（JS生成・ピル型） */
.badge{
  display:inline-block;padding:2px 9px;border-radius:100px;
  font-size:.64rem;font-weight:700;letter-spacing:.05em;
  vertical-align:middle;
}
.badge-crit{background:rgba(204,75,55,.12);color:var(--danger)}
.badge-warn{background:rgba(196,132,29,.13);color:var(--warn)}
.badge-info{background:rgba(74,126,196,.12);color:var(--info)}
.badge-good{background:rgba(46,139,87,.12);color:var(--safe)}
.badge-law{background:rgba(124,92,186,.11);color:var(--purple)}

/* 法的根拠トグル（JS生成） */
.legal-toggle{
  background:none;border:none;color:var(--text-muted);
  font-size:.7rem;cursor:pointer;padding:4px 0;
  transition:color .2s;display:block;margin-top:4px;
}
.legal-toggle:hover{color:var(--purple)}
.legal-box{
  display:none;padding:10px 12px;margin-top:6px;
  background:var(--surface2);border-radius:8px;
  font-size:.74rem;color:var(--text-dim);line-height:1.8;
  border:1px solid var(--border);
}
.legal-box.show{display:block}

/* 件数バッジ（JS生成・h2内） */
.count-badge{
  display:inline-block;margin-left:9px;
  padding:1px 10px;border-radius:100px;
  font-family:var(--font-sans);
  font-size:.64rem;font-weight:600;
  background:var(--surface2);color:var(--text-dim);
  border:1px solid var(--border);
  vertical-align:2px;letter-spacing:.04em;
}

/* =====================================================
   カテゴリ別ブレークダウン（JS生成・テーブル風リスト）
   ===================================================== */
.cat-acc-list{padding:var(--sp-2) var(--sp-5) var(--sp-4)}
.cat-acc-hint{
  font-size:.7rem;color:var(--text-muted);
  padding:var(--sp-2) 0 var(--sp-2);
}
.cat-acc-item{border-bottom:1px solid var(--border)}
.cat-acc-item:last-child{border-bottom:none}
.cat-acc-head{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:13px 4px;cursor:pointer;
  background:none;border:none;
  transition:background .2s;text-align:left;
  font-family:inherit;border-radius:8px;
}
.cat-acc-head:hover{background:var(--surface2)}
.cat-acc-item .cat-acc-icon{display:flex;align-items:center;flex-shrink:0;color:var(--text-dim)}
.cat-acc-item .cat-acc-name{font-size:.86rem;font-weight:600;flex:1;color:var(--text);min-width:0}
.cat-acc-count{font-size:.68rem;color:var(--text-muted);white-space:nowrap}
.cat-acc-track{
  width:72px;height:5px;border-radius:100px;background:var(--surface3);
  overflow:hidden;flex-shrink:0;
}
.cat-acc-fill{height:100%;border-radius:100px;transition:width .4s ease;display:block}
.cat-acc-score{
  font-family:var(--font-serif);
  font-size:.92rem;font-weight:700;min-width:28px;text-align:right;
  flex-shrink:0;
}
.cat-acc-chevron{font-size:.6rem;color:var(--text-muted);transition:transform .25s;flex-shrink:0}
.cat-acc-item.open .cat-acc-chevron{transform:rotate(180deg)}
.cat-acc-item .cat-acc-body{
  display:none;padding:var(--sp-2) var(--sp-2) var(--sp-4);
}
.cat-acc-item.open .cat-acc-body{display:block}
.cat-acc-item .cat-acc-body[hidden]{display:none}
.cat-acc-flag{
  padding:10px 14px;margin-bottom:6px;border-radius:var(--radius-sm);
  background:var(--surface2);border:1px solid var(--border);
}
.cat-acc-flag:last-child{margin-bottom:0}
.cat-acc-flag-title{font-size:.83rem;font-weight:600;color:var(--text);margin-bottom:2px;line-height:1.6}
.cat-acc-flag-desc{font-size:.77rem;color:var(--text-dim);line-height:1.75}

/* 主な減点要因トップ3（JS生成・ランクリスト） */
.top-factors{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.top-factors-title{
  font-size:.64rem;font-weight:600;color:var(--text-muted);
  margin-bottom:var(--sp-3);letter-spacing:.17em;text-transform:uppercase;
}
.top-factor-item{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:9px 0;
  border-bottom:1px solid var(--border);
}
.top-factor-item:last-child{border-bottom:none;padding-bottom:0}
.top-factor-item:first-child{padding-top:0}
.top-factor-rank{
  font-family:var(--font-serif);
  font-size:.72rem;font-weight:700;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--danger-tint);color:var(--danger);
  border:1px solid rgba(204,75,55,.22);
  white-space:nowrap;flex-shrink:0;margin-top:2px;
}
.tf-warning .top-factor-rank{background:var(--warn-tint);color:var(--warn);border-color:rgba(196,132,29,.25)}
.top-factor-item span:last-child{font-size:.82rem;color:var(--text-dim);line-height:1.7}

/* =====================================================
   面接対策
   ===================================================== */
.interview-body{text-align:center;padding:var(--sp-5)}
.interview-lead{font-size:.8rem;color:var(--text-dim);margin-bottom:var(--sp-4);line-height:1.8}
.btn-generate{
  padding:13px 28px;
  background:var(--accent);
  color:#fff;border:none;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:700;cursor:pointer;
  transition:background .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn-generate:hover{background:var(--accent-hover)}
.genq-progress{margin-top:var(--sp-4)}
.genq-progress-label{color:var(--text-dim);font-size:.82rem;margin-bottom:var(--sp-2)}
.genq-progress-track{
  height:4px;background:var(--surface3);border-radius:100px;
  overflow:hidden;max-width:300px;margin:0 auto;
}
.genq-progress-bar{
  height:100%;width:0%;
  background:var(--accent);
  border-radius:100px;transition:width .3s;
}

/* =====================================================
   シェア
   ===================================================== */
.share-card{padding:var(--sp-4) var(--sp-5)}
.share-title{
  text-align:center;margin-bottom:var(--sp-3);
  font-size:.64rem;font-weight:600;color:var(--text-muted);
  letter-spacing:.17em;text-transform:uppercase;
}
.share-buttons{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.btn-share-x{
  padding:10px 20px;background:var(--ink);color:#fff;
  border:1px solid var(--ink);border-radius:var(--radius-sm);cursor:pointer;
  font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:7px;
  transition:background .2s;
}
.btn-share-x:hover{background:var(--ink-2)}
.btn-share-copy{
  padding:10px 20px;background:var(--surface);color:var(--text-dim);
  border:1px solid var(--border2);border-radius:var(--radius-sm);cursor:pointer;
  font-size:.85rem;font-weight:600;transition:background .2s,border-color .2s;
}
.btn-share-copy:hover{background:var(--surface2);border-color:var(--border2)}

/* =====================================================
   リセット
   ===================================================== */
.reset-row{padding:var(--sp-2) 0;text-align:center}
.btn-reset{
  padding:12px 28px;
  background:none;
  color:var(--text-dim);font-size:.86rem;font-weight:600;
  border:1px solid var(--border2);border-radius:100px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,color .2s;
}
.btn-reset:hover{background:var(--surface2);color:var(--text)}
.btn-reset svg{width:15px;height:15px;fill:currentColor}

/* =====================================================
   診断履歴（アーカイブリスト）
   ===================================================== */
.history-clear{
  background:none;border:1px solid var(--border2);
  color:var(--text-muted);padding:4px 13px;border-radius:100px;
  font-size:.68rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.history-clear:hover{border-color:rgba(204,75,55,.35);color:var(--danger);background:var(--danger-tint)}
.history-list{padding:var(--sp-2) var(--sp-4);max-height:320px;overflow-y:auto}
.history-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:11px var(--sp-2);
  border-bottom:1px solid var(--border);
  transition:background .2s;border-radius:8px;
}
.history-item:last-child{border-bottom:none}
.history-item:hover{background:var(--surface2)}
.history-score{
  width:42px;height:42px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1rem;line-height:1;
  flex-shrink:0;font-family:var(--font-serif);
}
.history-score small{font-size:.54rem;font-weight:500;opacity:.85;margin-top:1px;font-family:var(--font-sans)}
.history-info{flex:1;min-width:0}
.history-name{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-meta{font-size:.68rem;color:var(--text-muted)}
.history-redo{
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text-dim);padding:6px 14px;border-radius:100px;
  font-size:.7rem;font-weight:600;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.history-redo:hover{color:var(--accent);border-color:rgba(212,113,78,.4);background:var(--accent-tint)}
.history-note{padding:var(--sp-2) var(--sp-5) var(--sp-4);font-size:.66rem;color:var(--text-muted);text-align:center;line-height:1.7}

/* =====================================================
   スティッキースコアバー（ダークUI）
   ===================================================== */
.sticky-score{
  position:fixed;top:0;left:0;right:0;
  height:46px;
  background:rgba(45,43,42,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:none;align-items:center;justify-content:center;gap:var(--sp-3);
  z-index:100;cursor:pointer;
  font-size:.84rem;
}
.sticky-score.show{display:flex}
.sticky-score-num{font-family:var(--font-serif);font-weight:700;font-size:1.12rem}
.sticky-score-label{font-weight:600;color:var(--on-ink-dim);font-size:.8rem}
.sticky-score-hint{font-size:.64rem;color:var(--on-ink-muted);letter-spacing:.06em}

/* =====================================================
   使い方・FAQ
   ===================================================== */
.seo-info{
  margin-top:var(--sp-7);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);
  align-items:start;
}
.howto-steps{list-style:none;padding:var(--sp-4) var(--sp-5)}
.howto-steps li{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border);
}
.howto-steps li:last-child{border-bottom:none}
.howto-num{
  width:28px;height:28px;
  background:var(--surface2);
  color:var(--accent);border-radius:50%;
  border:1px solid rgba(212,113,78,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);
  font-size:.84rem;font-weight:700;flex-shrink:0;
}
.howto-steps li div{flex:1}
.howto-steps strong{display:block;font-size:.88rem;color:var(--text);margin-bottom:2px}
.howto-steps span{font-size:.8rem;color:var(--text-dim);line-height:1.8}

.faq-list{padding:var(--sp-2) var(--sp-5) var(--sp-4)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  padding:14px 0;font-size:.87rem;font-weight:600;color:var(--text);
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  transition:color .2s;
}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  font-family:var(--font-serif);
  font-size:1.2rem;color:var(--text-muted);font-weight:400;flex-shrink:0;
}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{padding:0 0 var(--sp-4);font-size:.8rem;color:var(--text-dim);line-height:1.9}

/* =====================================================
   フッター（ダークUI）
   ===================================================== */
.footer{
  background:var(--ink);color:var(--on-ink-muted);
  margin-top:var(--sp-8);
}
.footer-inner{
  max-width:1160px;margin:0 auto;
  padding:var(--sp-6) var(--sp-5) var(--sp-7);
  text-align:center;font-size:.7rem;line-height:2;
}
.footer-links{margin-bottom:var(--sp-3);font-size:.78rem;color:var(--on-ink-dim)}
.footer a{color:var(--on-ink-dim);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.footer a:hover{color:var(--on-ink)}
.footer-copy{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.08);
  letter-spacing:.04em;
}

/* =====================================================
   アニメーション
   ===================================================== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media(min-width:981px) and (min-height:860px){
  .col-input{position:sticky;top:var(--sp-4)}
}
@media(max-width:980px){
  .dashboard{
    grid-template-columns:1fr;
    grid-template-areas:"input" "results" "history";
    grid-template-rows:auto;
  }
  .seo-info{grid-template-columns:1fr}
  .results-empty{padding:var(--sp-7) var(--sp-5);grid-area:results}
  .hero{padding:var(--sp-6) 0 var(--sp-5)}
}
@media(max-width:600px){
  main.page{padding:0 var(--sp-3) var(--sp-7)}
  .topbar-inner{padding:11px var(--sp-4)}
  .topbar-badge{display:none}
  .hero{padding:var(--sp-5) 0 var(--sp-5)}
  .hero-lead{font-size:.84rem}
  .hero-lead br{display:none}
  .hero-stat{padding:11px 18px}
  .hero-stat b{font-size:1.25rem}
  .card-header{padding:var(--sp-3) var(--sp-4)}
  .card-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .section-padding{padding:var(--sp-2) var(--sp-4) var(--sp-4)}
  .cat-acc-list{padding:var(--sp-2) var(--sp-4) var(--sp-3)}
  .cat-acc-track{width:44px}
  .top-factors{padding:var(--sp-3) var(--sp-4)}
  .report-cover{padding:var(--sp-4)}
  .report-verdict{flex-direction:column;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-4)}
  .report-score{border-right:none;padding-right:0;border-bottom:1px solid var(--border);padding-bottom:var(--sp-3);width:100%}
  .score-big-num{font-size:3.6rem}
  .score-title{font-size:1.25rem}
  .summary-row{gap:6px}
  .sum-item{padding:11px 4px 9px}
  .sum-num{font-size:1.3rem}
  .sum-label{font-size:.6rem;letter-spacing:.05em}
  .optional-fields{flex-direction:column}
  .radar-body{padding:var(--sp-2) 0 var(--sp-3)}
  .results-empty{padding:var(--sp-6) var(--sp-4)}
  .results-empty-desc br{display:none}
  .results-empty-steps{gap:var(--sp-3)}
  .footer-inner{padding:var(--sp-5) var(--sp-4) var(--sp-6)}
}

/* =====================================================
   印刷（レポートとして出力）
   ===================================================== */
@media print{
  body{background:#fff}
  .topbar,.sticky-score,.btn-analyze,.btn-reset,.reset-row,.sample-row,
  #shareSection,#blogCTA,#scoreCTA,.results-empty,.input-note,
  .optional-fields,.col-input,.hero,#historySection,.seo-info{display:none!important}
  .dashboard{display:block}
  .card{box-shadow:none!important;border:1px solid #ddd!important}
  .col-results > *{margin-bottom:12px}
  .collapse-toggle{display:none}
}