/* =====================================================================
 * strength-finder.css
 * [strength_finder] 強み診断ツール（ストレングスファインダー代替・全文オリジナル）
 * 20問→16資質を4領域で採点→あなたの強みTOP5を順位表示。
 * 記事埋め込み前提。reset を読まず本文に馴染ませる方針（spi-mini / egogram と同思想）。
 * 命名空間：.sf-* / カスタムプロパティ：--sf-*
 * ===================================================================== */
.sf-app{
  --sf-main:#26A69A; --sf-dark:#1f8a80; --sf-pale:#E4F8F6;
  --sf-blue:#4a7fd0; --sf-red:#e04e4e; --sf-orange:#FF9902; --sf-purple:#8a78c8;
  --sf-gold:#f0a93b;
  --sf-ink:#1f2328; --sf-sub:#6a737d; --sf-line:#e1e4e8;
  --sf-surface:#f6f8fa; --sf-yellow:#f1c40f;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--sf-ink); max-width:680px; margin:1.8em auto; line-height:1.75;
  background:#fff; border:1px solid var(--sf-line); border-radius:10px;
  padding:1.6em 1.6em 1.4em; -webkit-font-smoothing:antialiased;
}
.sf-app *{box-sizing:border-box; margin:0;}

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

/* ペア比較（本家SF式）：A=左 / B=右 を横並び＋下に左右スペクトル（左=A寄り緑・右=B寄り青）の4ドット */
.sf-pages{margin-top:6px;}
/* 枠なし：ペア間は余白＋細い区切り線だけで分ける */
.sf-pair{padding:6px 2px 22px; margin:0; background:none;}
.sf-pair + .sf-pair{border-top:1px solid #eef1f0; padding-top:22px;}
/* A・B 横並び（付箋枠なし＝文字を全幅で大きく見せる） */
.sf-pair-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:14px; align-items:start;}
.sf-pair-stmt{position:relative; display:flex; align-items:flex-start; gap:8px; font-size:.95em; font-weight:600; line-height:1.55; color:var(--sf-ink); padding:2px 0;}
.sf-pair-mark{flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; color:#fff; font-size:.7em; font-weight:900; line-height:1; margin-top:2px;}
.sf-pair-a .sf-pair-mark{background:var(--sf-main);}
.sf-pair-b .sf-pair-mark{background:var(--sf-blue);}
.sf-pair-txt{flex:1;}
/* 左右スペクトルの4ドット */
.sf-pair-slider{position:relative; display:grid; grid-template-columns:repeat(4,1fr); align-items:start; padding:0 5%;}
.sf-pair-slider::before{content:""; position:absolute; left:18%; right:18%; top:15px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--sf-main),var(--sf-blue)); opacity:.28;}
.sf-pair-opt{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.45em; padding:.2em 0; cursor:pointer; text-align:center;}
.sf-pair-opt input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.sf-pair-dot{width:26px; height:26px; border-radius:50%; border:2px solid #cfdad8; background:#fff; transition:all .12s;}
.sf-opt-a2 .sf-pair-dot,.sf-opt-b2 .sf-pair-dot{width:32px; height:32px;}
.sf-pair-opt:hover .sf-pair-dot{border-color:var(--sf-main);}
.sf-pair-lab{font-size:.58em; font-weight:700; line-height:1.2; color:var(--sf-sub);}
/* A側＝ミント / B側＝ブルー */
.sf-opt-a2:has(input:checked) .sf-pair-dot,.sf-opt-a1:has(input:checked) .sf-pair-dot{background:var(--sf-main); border-color:var(--sf-main); box-shadow:0 0 0 3px rgba(38,166,154,.16);}
.sf-opt-b2:has(input:checked) .sf-pair-dot,.sf-opt-b1:has(input:checked) .sf-pair-dot{background:var(--sf-blue); border-color:var(--sf-blue); box-shadow:0 0 0 3px rgba(74,127,208,.16);}
.sf-pair-opt:has(input:checked) .sf-pair-lab{color:var(--sf-ink);}
.sf-pair-opt:has(input:focus-visible) .sf-pair-dot{box-shadow:0 0 0 3px rgba(74,127,208,.35);}
@media (max-width:560px){
  .sf-pair-cols{gap:12px; margin-bottom:12px;}
  .sf-pair-stmt{font-size:.88em; padding:2px 0; gap:6px;}
  .sf-pair-mark{width:18px; height:18px;}
  .sf-pair-slider{padding:0 2%;}
  .sf-pair-slider::before{left:15%; right:15%;}
  .sf-pair-dot{width:23px; height:23px;}
  .sf-opt-a2 .sf-pair-dot,.sf-opt-b2 .sf-pair-dot{width:28px; height:28px;}
  .sf-pair-lab{font-size:.52em;}
}

/* ナビ（戻る／次のページへ・結果を見る） */
.sf-nav{display:flex; align-items:center; gap:10px; margin-top:18px;}
.sf-back{flex:0 0 auto; background:none; border:1.5px solid var(--sf-line); color:var(--sf-sub); font-weight:700; font-size:.95em; cursor:pointer; padding:13px 18px; border-radius:12px; font-family:inherit;}
.sf-submit{flex:1; background:var(--sf-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;}
.sf-submit:hover{filter:brightness(1.03);}
.sf-submit:disabled{background:#d7dedd; box-shadow:none; cursor:not-allowed;}

/* gate → career-match-gate.css に移管（共有 CSS）*/

/* ===== 結果（ゲート解除後）===== */
.sf-result-head{text-align:center; margin-bottom:18px;}
.sf-result-kicker{font-size:.82em; font-weight:800; color:var(--sf-sub); letter-spacing:.05em;}
.sf-axis{font-size:1.5em; font-weight:900; line-height:1.35; margin:6px 0 2px; color:var(--sf-ink);}
.sf-axis .sf-axis-em{color:var(--sf-main);}
.sf-axis-persona{font-size:1em; font-weight:800; color:var(--sf-main); margin-top:4px; line-height:1.4;}
.sf-axis-sub{font-size:.95em; font-weight:700; color:var(--sf-main);}

.sf-card{border:1px solid var(--sf-line); border-radius:16px; padding:20px 18px; margin-bottom:14px; background:#fff;}
.sf-card-title{font-size:1.02em; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; color:var(--sf-ink);}
.sf-card-title::before{content:""; width:5px; height:18px; background:var(--sf-main); border-radius:3px;}
.sf-card p{font-size:.93em; color:#374049;}
.sf-chart-wrap{overflow:visible;}

/* 強みの軸カード */
.sf-axis-catch{font-size:1em; font-weight:800; color:var(--sf-dark); margin-bottom:8px;}
.sf-jobs{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.sf-job{background:var(--sf-pale); color:var(--sf-dark); font-weight:700; font-size:.85em; padding:7px 13px; border-radius:10px;}

/* TOP5 ランキング */
.sf-rank-head{font-size:1.05em; font-weight:900; color:var(--sf-ink); margin:24px 0 12px; text-align:center;}
.sf-ranklist{display:flex; flex-direction:column; gap:12px;}
.sf-rank-item{position:relative; border:1px solid var(--sf-line); border-left:5px solid var(--sf-dom,#26A69A); border-radius:14px; padding:16px 16px 18px; background:#fff;}
.sf-rank-item[data-rank="1"]{border:2px solid var(--sf-gold); border-left:6px solid var(--sf-gold); box-shadow:0 10px 26px rgba(240,169,59,.16); background:linear-gradient(180deg,#fffdf6 0%,#fff 60%);}
.sf-rank-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.sf-rank-badge{flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; border-radius:8px; background:var(--sf-dom,#26A69A); color:#fff; font-size:.82em; font-weight:900; line-height:1;}
.sf-rank-item[data-rank="1"] .sf-rank-badge{background:linear-gradient(135deg,#f4b740,#e8951f);}
.sf-rank-name{font-size:1.18em; font-weight:900; color:var(--sf-ink); line-height:1.3; flex:1; min-width:0;}
.sf-rank-domain{flex:none; font-size:.7em; font-weight:800; color:#fff; background:var(--sf-dom,#26A69A); padding:3px 8px; border-radius:999px; white-space:nowrap;}
.sf-rank-meter{position:relative; height:10px; border-radius:999px; background:var(--sf-surface); overflow:hidden; margin:2px 0 12px;}
.sf-rank-bar{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--sf-dom,#26A69A);}
.sf-rank-pct{font-size:.74em; font-weight:800; color:var(--sf-sub); text-align:right; margin-bottom:8px;}
.sf-rank-pct b{color:var(--sf-dom,#1f8a80); font-size:1.15em;}
.sf-rank-catch{font-size:.92em; font-weight:800; color:var(--sf-dom,#1f8a80); margin-bottom:6px;}
.sf-rank-desc{font-size:.9em; color:#374049; margin-bottom:10px;}
.sf-rank-appeal{font-size:.86em; color:#41607a; background:#f3f7fb; border-radius:10px; padding:11px 13px;}
.sf-rank-appeal b{color:var(--sf-blue); font-weight:800; display:block; margin-bottom:3px; font-size:.95em;}
.sf-rank-tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.sf-tag{font-size:.78em; font-weight:700; color:var(--sf-sub); background:var(--sf-surface); border:1px solid var(--sf-line); padding:5px 10px; border-radius:8px;}

/* 結びコメント */
.sf-outro{font-size:.86em; color:var(--sf-sub); text-align:center; margin-top:6px; line-height:1.7;}

.sf-app [hidden]{display:none !important;}