/* =====================================================================
 * egogram.css
 * [egogram] エゴグラム（ディグラム風）性格診断ツール
 * 記事埋め込み前提。reset を読まず本文に馴染ませる方針（spi-mini と同思想）。
 * 命名空間：.eg-* / カスタムプロパティ：--eg-*
 * ===================================================================== */
.eg-app{
  --eg-main:#26A69A; --eg-dark:#1f8a80; --eg-pale:#E4F8F6;
  --eg-blue:#4a7fd0; --eg-red:#e04e4e; --eg-orange:#FF9902;
  --eg-ink:#1f2328; --eg-sub:#6a737d; --eg-line:#e1e4e8;
  --eg-surface:#f6f8fa; --eg-yellow:#f1c40f;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--eg-ink); max-width:680px; margin:1.8em auto; line-height:1.75;
  /* spi性格検査と同じカード枠 */
  background:#fff; border:1px solid var(--eg-line); border-radius:10px;
  padding:1.6em 1.6em 1.4em; -webkit-font-smoothing:antialiased;
}
.eg-app *{box-sizing:border-box; margin:0;}

/* ヘッダ（タイトル左・解答状況ピル右） */
.eg-head{margin-bottom:1.3em;}
.eg-head-row{display:flex; align-items:center; justify-content:space-between; gap:1em;}
.eg-title{font-size:1.1em; font-weight:700; color:var(--eg-ink); line-height:1.4; flex:1; min-width:0;}
.eg-status{display:inline-flex; align-items:center; gap:.4em; flex:none; font-size:.9em; color:var(--eg-sub); background:var(--eg-surface); padding:.35em .8em; border-radius:999px; white-space:nowrap;}
.eg-status-dot{width:8px; height:8px; border-radius:50%; background:var(--eg-yellow); flex:none;}
.eg-status-label{font-weight:500;}
.eg-status-count{font-weight:700; color:var(--eg-ink);}
.eg-status-count [data-role="count"]{color:var(--eg-dark); font-size:1.1em;}
.eg-lead{font-size:.9em; color:var(--eg-sub); margin-top:.4em;}

/* ○スケール・マトリクス（SPI性格検査と同形式） */
.eg-pages{margin-top:6px;}
.eg-scale-item{padding:15px 2px; border-bottom:1px solid #eef1f0;}
.eg-scale-item:first-child{border-top:1px solid #eef1f0;}
.eg-scale-q{margin:0 0 .7em; font-size:1em; font-weight:700; line-height:1.6; color:var(--eg-ink);}
.eg-qno{display:inline-flex; align-items:center; justify-content:center; min-width:1.9em; height:1.5em; padding:0 .45em; margin-right:.55em; border-radius:6px; background:var(--eg-main); color:#fff; font-size:.74em; font-weight:800; line-height:1; vertical-align:middle;}
.eg-scale-opts{display:flex; gap:.25em;}
.eg-scale-opt{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:.45em; padding:.2em 0; text-align:center; cursor:pointer;}
.eg-scale-opt input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.eg-scale-dot{width:26px; height:26px; border-radius:50%; border:2px solid #cfdad8; background:#fff; transition:all .12s;}
.eg-scale-opt:first-child .eg-scale-dot,
.eg-scale-opt:last-child .eg-scale-dot{width:30px; height:30px;}
.eg-scale-opt:hover .eg-scale-dot{border-color:var(--eg-main);}
.eg-scale-opt:has(input:checked) .eg-scale-dot{background:var(--eg-main); border-color:var(--eg-main); box-shadow:0 0 0 3px rgba(38,166,154,.16);}
.eg-scale-opt:has(input:focus-visible) .eg-scale-dot{box-shadow:0 0 0 3px rgba(74,127,208,.35);}
.eg-scale-optlabel{font-size:.62em; font-weight:600; line-height:1.25; color:var(--eg-sub);}
.eg-scale-opt:has(input:checked) .eg-scale-optlabel{color:var(--eg-dark);}

/* 見出し行（デスクトップのみ・ページ先頭に段階ラベルを1回） */
.eg-scale-head{display:none; border:0; padding-top:0; padding-bottom:.2em;}
.eg-scale-head .eg-scale-opt{padding:0; cursor:default;}
.eg-scale-head .eg-scale-q{display:none;}

@media (min-width:561px){
  .eg-scale-item{display:flex; align-items:center; gap:1.4em;}
  .eg-scale-q{flex:0 0 42%; margin:0;}
  .eg-scale-opts{flex:1;}
  .eg-scale-head{display:flex;}
  .eg-scale-head .eg-scale-q{display:block;}
  .eg-scale-item:not(.eg-scale-head) .eg-scale-optlabel{display:none;}
}
@media (max-width:560px){
  .eg-scale-q{font-size:.95em;}
  .eg-scale-dot{width:22px; height:22px;}
  .eg-scale-opt:first-child .eg-scale-dot,
  .eg-scale-opt:last-child .eg-scale-dot{width:25px; height:25px;}
  .eg-scale-optlabel{font-size:.56em;}
  .eg-scale-opts{gap:.15em;}
  .eg-scale-item{padding-left:.2em; padding-right:.2em;}
}

/* ナビ（戻る／次のページへ・結果を見る） */
.eg-nav{display:flex; align-items:center; gap:10px; margin-top:18px;}
.eg-back{flex:0 0 auto; background:none; border:1.5px solid var(--eg-line); color:var(--eg-sub); font-weight:700; font-size:.95em; cursor:pointer; padding:13px 18px; border-radius:12px; font-family:inherit;}
.eg-submit{flex:1; background:var(--eg-main); color:#fff; font-weight:800; font-size:1.05em; border:none; cursor:pointer; padding:16px 20px; border-radius:14px; box-shadow:0 6px 16px rgba(38,166,154,.28); font-family:inherit;}
.eg-submit:hover{filter:brightness(1.03);}
.eg-submit:disabled{background:#d7dedd; box-shadow:none; cursor:not-allowed;}

/* gate → career-match-gate.css に移管（共有 CSS）*/
/* result */
.eg-result-head{text-align:center; margin-bottom:18px;}
.eg-result-kicker{font-size:.82em; font-weight:800; color:var(--eg-sub); letter-spacing:.05em;}
.eg-type-name{font-size:1.7em; font-weight:900; line-height:1.3; margin:4px 0 2px;}
.eg-type-name .eg-accent{color:var(--eg-main);}
.eg-type-catch{font-size:.98em; font-weight:700; color:var(--eg-main);}
.eg-card{border:1px solid var(--eg-line); border-radius:16px; padding:20px 18px; margin-bottom:14px; background:#fff;}
.eg-card .eg-card-title{font-size:1.02em; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; color:var(--eg-ink);}
.eg-card .eg-card-title::before{content:""; width:5px; height:18px; background:var(--eg-main); border-radius:3px;}
.eg-card p{font-size:.93em; color:#374049;}
.eg-chart-wrap{overflow:visible;}
.eg-scoretbl{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px;}
.eg-scoretbl .eg-cell{text-align:center; font-size:.78em; font-weight:700; color:var(--eg-sub);}
.eg-scoretbl .eg-cell b{display:block; font-size:1.25em; color:var(--eg-ink);}
.eg-jobs{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px;}
.eg-job{background:var(--eg-pale); color:var(--eg-dark); font-weight:700; font-size:.85em; padding:7px 13px; border-radius:10px;}
.eg-app [hidden]{display:none !important;}