/* ============================================================
   White Finder — 「就活生の羅針盤」
   信頼感のある編集デザイン × ブランドグリーン × 受賞ゴールド
   namespace: .wf-*（すべて .wf-app 配下にスコープ）
   ============================================================ */

.wf-app {
	--wf-paper:    #fbfcfc;      /* カード地＝Figmaと同一(#fbfcfc・ほぼ白)。ヘッダーイラスト背景と一致し帯が自然に馴染む */
	--wf-panel:    #ffffff;
	--wf-ink:      #1f2328;
	--wf-ink-soft: #818181;
	--wf-green:    #1f8a80;
	--wf-green2:   #26A69A;
	--wf-green-d:  #16a99d;      /* セクション/ラベルのティール */
	--wf-teal:     #12a99d;      /* ゲートと共通のメインティール */
	--wf-teal-h:   #0e8e84;
	--wf-mint:     #b6e9e4;      /* ゲートのカード枠＝ミント */
	--wf-mint-pale:#E4F8F6;      /* 淡ミント（focus ring / ピル地） */
	--wf-field:    #f0faf8;      /* ツールの入力地＝淡ミント（くすみグレーから変更／ゲート合言葉欄は別途#eff5f7のまま） */
	--wf-orange:   #f56e05;
	--wf-orange2:  #FF7A00;
	--wf-gold:     #b7842f;      /* 受賞ゴールド（score chip 等に温存） */
	--wf-gold-l:   #f5ecd6;
	--wf-line:     #06c755;
	--wf-red:      #e04e4e;
	--wf-border:   #b6e9e4;      /* ミント枠（カード/フィールド共通） */

	--wf-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--wf-num:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Figma同様に数字もNoto */

	position: relative;
	font-family: var(--wf-font);
	color: var(--wf-ink);
	max-width: 400px;   /* Figmaのカード幅(≈382)に合わせる＝チップ折返し・全体比率を一致 */
	margin: 30px auto;
	padding: 0;
	background: var(--wf-paper);
	border: 1px solid var(--wf-mint);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(38, 166, 154, .12);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.wf-app * { box-sizing: border-box; }

/* celebrate 背景（結果ゲートと統一・薄く上寄せ） */
.wf-app-bg { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; }
.wf-inner { position: relative; z-index: 1; padding: 22px 20px; }

/* 段階表示（ロード時） */
.wf-head, .wf-filters, .wf-count, .wf-reveal-btn {
	opacity: 0; transform: translateY(12px);
	animation: wf-rise .65s cubic-bezier(.2, .7, .2, 1) forwards;
}
.wf-head     { animation-delay: .02s; }
.wf-filters  { animation-delay: .12s; }
.wf-count    { animation-delay: .22s; }
.wf-reveal-btn { animation-delay: .30s; }
@keyframes wf-rise { to { opacity: 1; transform: none; } }

/* ---------- ヘッダー（結果画面の見出し言語：ティール＋微シャドウ） ---------- */
.wf-head { text-align: center; margin-bottom: 20px; }
.wf-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 700; font-size: 12px;
	letter-spacing: .18em; text-transform: uppercase; color: var(--wf-teal);
	margin-bottom: 12px;
}
.wf-eyebrow svg { width: 14px; height: 14px; display: block; }
.wf-title {
	font-size: 1.5em; line-height: 1.42; font-weight: 700; letter-spacing: .01em;
	margin: 0 0 12px; color: var(--wf-teal); text-shadow: 0 3px 0 rgba(0, 0, 0, .04);
}
.wf-title em { color: var(--wf-orange); font-style: normal; }
.wf-lead { font-size: .82em; line-height: 1.85; font-weight: 500; margin: 0 auto; max-width: 30em; color: var(--wf-ink-soft); }

/* ---------- フィルタ（ミント枠カード＋ミントfield） ---------- */
.wf-filters {
	background: var(--wf-panel);
	border: 1px solid var(--wf-mint);
	border-radius: 18px;
	padding: 18px 16px;
	display: flex; flex-direction: column; gap: 15px;
	box-shadow: 0 10px 24px rgba(20, 153, 141, .10);
}
.wf-field { display: block; }
.wf-label {
	display: block; font-size: .76em; font-weight: 700; letter-spacing: .02em;
	color: var(--wf-green-d); margin-bottom: 6px; padding-left: 2px;
}
.wf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
/* 孤立した最後の項目を全幅に＝右の空白を解消（ロックモードで表示数が変わっても崩れない） */
.wf-grid > .wf-field:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ロック時の対象業界ラベル（業界ドロップダウンの代わり）。連番の起点1つ分を消費して後続軸の番号を揃える */
.wf-scope {
	counter-increment: wf-step;
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: .82em; font-weight: 600; color: var(--wf-ink-soft);
	padding: 2px 0 2px;
}
.wf-scope b { color: var(--wf-teal); font-weight: 800; font-size: 1.1em; }
.wf-scope-n {
	font-weight: 800; font-size: .92em; color: var(--wf-teal-h);
	background: var(--wf-mint-pale); border: 1px solid var(--wf-mint);
	padding: 2px 10px; border-radius: 999px;
}

/* セレクト（ゲートの入力質感：ミント枠2px＋淡field地＋ティール矢印） */
.wf-select-wrap { position: relative; }
.wf-select-wrap::after {
	content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
	border-right: 2px solid var(--wf-teal); border-bottom: 2px solid var(--wf-teal);
	transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.wf-input {
	display: block; width: 100%; box-sizing: border-box;
	padding: 14px 38px 14px 14px;
	font-family: var(--wf-font); font-size: .94em; line-height: 1.5;
	height: auto; min-height: 54px; vertical-align: middle;
	color: var(--wf-ink); background: var(--wf-field);
	border: 2px solid var(--wf-mint); border-radius: 14px;
	box-shadow: 0 2px 5px rgba(38, 166, 154, .06);
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
	cursor: pointer;
}
.wf-input:hover { border-color: #9fdfd8; }
.wf-input:focus { outline: none; border-color: var(--wf-teal); background: #fff; box-shadow: 0 0 0 4px var(--wf-mint-pale); }

/* トグル＝プレーン（地色/枠なし）。スイッチ＋ラベルのみを左寄せ */
.wf-toggles { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 6px; padding-left: 2px; }
.wf-switch {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
	font-size: .9em; font-weight: 600; color: var(--wf-ink);
	padding: 2px 0; background: none; border: 0;
	transition: color .15s;
}
.wf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wf-switch-track {
	position: relative; width: 38px; height: 22px; border-radius: 999px; flex: none;
	background: #c4dbd6; transition: background .2s;
}
.wf-switch-track::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .2s cubic-bezier(.4, 1.4, .5, 1);
}
.wf-switch input:checked ~ .wf-switch-track { background: var(--wf-teal); }
.wf-switch input:checked ~ .wf-switch-track::after { transform: translateX(16px); }
.wf-switch:has(input:checked) { color: var(--wf-teal-h); }
.wf-switch input:focus-visible ~ .wf-switch-track { box-shadow: 0 0 0 4px var(--wf-mint-pale); }

/* ---------- 該当社数（主役・ティールの大数字＋オレンジ下線） ---------- */
.wf-count {
	text-align: center; margin: 22px 0 4px;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.wf-count-label {
	font-size: .82em; font-weight: 700; letter-spacing: .06em; color: var(--wf-ink-soft);
}
.wf-count-figure {
	display: inline-flex; align-items: baseline; gap: 5px; position: relative;
	padding: 4px 8px 8px;
}
.wf-count-figure::after { content: none; }  /* 装飾グラデ下線を撤去（AI感の除去） */
.wf-count-num {
	font-weight: 900; font-size: 3.6em; line-height: 1;
	color: var(--wf-teal); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.wf-count-unit { font-size: 1.25em; font-weight: 800; color: var(--wf-teal); }
.wf-count-total { font-size: .76em; color: var(--wf-ink-soft); margin-top: 4px; }
.wf-count-total b { font-weight: 800; color: var(--wf-ink); }
.wf-count.wf-pulse .wf-count-num { animation: wf-pop .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes wf-pop { 0% { transform: scale(1); } 35% { transform: scale(1.09); color: var(--wf-green2); } 100% { transform: scale(1); } }

/* ---------- CTA（ゲートのボタン言語＝立体段差） ---------- */
/* ゲートを開く「LINEで見る」CTA＝実ゲートの LINE CTA（.wf-line-btn）と同じ作り：
   緑 #06c755・LINEマーク左絶対・ラベル全幅センター・立体二重シャドウ。flex横並び＋::after矢印は折り返すので不可。 */
.wf-reveal-btn {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 340px; min-height: 58px; margin: 12px auto 0; padding: 12px 16px;
	background: #ff7a00 !important; color: #fff; border: none; border-radius: 14px; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	box-shadow: 0 3px 0 #d15f00, 0 6px 12px rgba(213, 95, 0, .20);
	box-sizing: border-box; transition: transform .08s ease, filter .14s, box-shadow .08s;
}
.wf-reveal-btn:hover { filter: brightness(1.03); }
.wf-reveal-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d15f00, 0 3px 8px rgba(213, 95, 0, .18); }
.wf-reveal-label { position: absolute; left: 0; right: 0; padding: 0 48px; color: #fff; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.5; }
.wf-reveal-num { font-weight: 800; padding: 0 .14em; }

/* ---------- ビュー切替（フィルタ⇄結果）＋ 結果プレビュー（1社実名＋残りモザイク） ---------- */
.wf-view-filter[hidden], .wf-view-result[hidden] { display: none; }
/* 結果画面ではツール外枠(.wf-app)の枠・背景・影を消してゲートカード1枚だけに（spi-mini と同じ単一カード＝二重カード解消） */
.wf-app.wf-result-active { background: none; border: none; box-shadow: none; padding: 0; margin: 0 auto; }
.wf-app.wf-result-active .wf-app-bg { display: none; }
.wf-app.wf-result-active .wf-inner { padding: 0; }
.wf-preview { margin: 18px 0 2px; }
.wf-preview-head { text-align: center; font-size: 17px; font-weight: 700; color: #12a99d; margin: 0 0 14px; }
.wf-preview-head b { color: #f56e05; font-size: 1.5em; font-weight: 900; padding: 0 .1em; }
.wf-preview-list { display: flex; flex-direction: column; gap: 8px; }
.wf-preview-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #d8efe9; border-radius: 12px; }
.wf-preview-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E4F8F6; color: #12a99d; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.wf-preview-body { flex: 1; min-width: 0; }
.wf-preview-name { font-weight: 700; font-size: 15px; color: #2b2b2b; }
.wf-preview-name.wf-mosaic { filter: blur(6px); -webkit-user-select: none; user-select: none; color: #8aa39f; }
.wf-preview-meta { font-size: 12px; color: #6b7a78; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-preview-lock { flex: none; font-size: 15px; opacity: .55; }
.wf-preview-note { text-align: center; font-size: 13px; color: #818181; margin: 14px 0 0; font-weight: 700; }
.wf-preview-note b { color: #f56e05; }

/* ============================================================
   LINEゲート — 実ゲート [spi_mini] のデザインを忠実再現（ゲートデザインskill）
   出典：spi-exam/assets/css/spi-mini.css 1405〜1637。色・寸法・構造は同一。
   挙動（LIFF+?follow=・target無・ゲート先行・永続化なし・サーバ側照合AJAX）は厳守。
   ============================================================ */
.wf-gate { display: flex; justify-content: center; padding: 1em 0 .5em; margin-top: 16px; animation: wf-rise .4s ease forwards; }
.wf-gate[hidden] { display: none; }

.wf-gate-card {
	position: relative; overflow: hidden;
	width: 100%; max-width: 430px;
	background: #fbfffe; border: 1px solid #b6e9e4; border-radius: 20px;
	padding: 32px 26px 34px; text-align: center;
	box-shadow: 0 10px 28px rgba(38, 166, 154, .12);
	box-sizing: border-box; line-height: 1.75;
}
.wf-gate-bg { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; }
.wf-gate-card-body { position: relative; z-index: 1; }

.wf-gate-eyebrow { margin: 0 0 1.5em; font-size: 20px; font-weight: 700; color: #18afa3; letter-spacing: .02em; }

.wf-gate-title { margin: 0; padding: 0; border: 0; background: none; text-align: center; }
.wf-gate-title-main {
	display: block; color: #12a99d; font-size: 23px; font-weight: 700; line-height: 1.32;
	letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .04); word-break: keep-all; overflow-wrap: anywhere;
}
.wf-gate-count { color: #f56e05; font-weight: 900; padding: 0 .12em; }
.wf-gate-title-sub {
	display: block; margin-top: 16px; color: #818181; font-size: 13px; font-weight: 700;
	line-height: 22px; text-shadow: 0 3px 0 rgba(0, 0, 0, .04);
}

/* 社会的証明 */
.wf-gate-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.wf-gate-proof svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.wf-gate-proof-num { color: #f56e05; font-weight: 900; font-size: 20px; letter-spacing: .6px; }
.wf-gate-proof-suf { color: #818181; font-weight: 700; font-size: 14px; }

.wf-gate-minute { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #12a99d; line-height: 20px; }

/* LINE CTA：立体二重シャドウ（0 5px 0 の段差）。アイコン左絶対・ラベル全幅中央 */
.wf-line-btn {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; max-width: 340px; min-height: 52px; margin: 0 auto; padding: 10px 16px;
	background: #06c755; color: #fff !important; border-radius: 24px; text-decoration: none !important;
	box-shadow: 0 12px 22px rgba(3, 140, 56, .38), 0 5px 0 rgba(3, 102, 41, .55);
	box-sizing: border-box; transition: transform .08s ease;
}
.wf-line-btn:hover { color: #fff; }
.wf-line-btn:active { transform: translateY(2px); }
.wf-line-btn-primary { min-height: 60px; }
.wf-line-btn-bottom { margin-top: 20px; max-width: 298px; }
.wf-line-badge {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	background: transparent; border: none !important; flex-shrink: 0; box-shadow: none !important;
}
.wf-line-btn .wf-line-mark, .wf-reveal-btn .wf-line-mark { display: block; width: 30px !important; height: 30px !important; margin: 0 !important; object-fit: contain; flex: none; }
.wf-line-label { position: absolute; left: 0; right: 0; box-sizing: border-box; padding: 0 44px; color: #fff !important; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.5; }
/* 下向き三角矢印（上CTA→キーワード入力の導線。ミニクイズ spi-mini-gate-arrow と同値） */
.wf-gate-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 13px solid #12a99d; margin: 10px auto 0; }

/* 合言葉入力（lock + input + ＞submit） */
.wf-gate-form { margin: 18px 0 0; display: block; }
.wf-gate-field {
	position: relative; width: 100%; max-width: 291px; height: 60px; margin: 0 auto;
	background: #eff5f7; border: 2px solid #b6e9e4; border-radius: 22px; box-sizing: border-box;
}
.wf-gate-field:focus-within { border-color: #12a99c; }
.wf-keyword.is-error { color: #e04e4e; }
.wf-gate-field:has(.wf-keyword.is-error) { border-color: #e04e4e; }
.wf-gate-lock { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.wf-gate-lock-body { position: absolute; left: 2px; top: 9px; width: 16px; height: 11px; background: #949aa0; border-radius: 2px; }
.wf-gate-lock-shackle { position: absolute; left: 5px; top: 2px; width: 10px; height: 10px; border: 2px solid #949aa0; border-bottom: 0; border-radius: 5px 5px 0 0; }
/* 詳細度を上げてテーマの .entry-content input の padding 等に勝たせる */
.wf-app .wf-gate-field .wf-keyword {
	width: 100%; height: 100%; border: 0; background: transparent; padding: 0 46px 0 48px; margin: 0;
	font: inherit; font-size: 15px; font-weight: 500; color: var(--wf-ink); outline: none; box-shadow: none; box-sizing: border-box;
}
.wf-keyword::placeholder { color: #949aa0; font-weight: 500; }
.wf-unlock-btn {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border: 0; background: #12a99d; color: #fff; border-radius: 12px;
	font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .08s ease;
}
.wf-unlock-btn:hover { background: #0e8e84; }
.wf-unlock-btn:active { transform: translateY(-50%) scale(.94); }
/* AJAX 確認中：＞を隠してスピナー（textContent は書き換えない） */
.wf-unlock-btn.is-loading { color: transparent; pointer-events: none; }
.wf-unlock-btn.is-loading::after {
	content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: wf-spin .6s linear infinite;
}
@keyframes wf-spin { to { transform: rotate(360deg); } }
.wf-gate-error { margin: 8px 0 0; color: #e04e4e; font-size: 13px; font-weight: 700; }
.wf-gate-error[hidden] { display: none; }

.wf-gate-note { display: block; margin: 10px 0 20px; font-size: 11px; font-weight: 700; color: #ff7a00; }

.wf-gate-section-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: #16a99d; line-height: 22px; text-align: center; }

.wf-gate-benefits { display: flex; flex-direction: column; gap: 6px; max-width: 270px; margin: 0 auto; }
.wf-gate-benefit {
	display: flex; align-items: center; gap: 12px; min-height: 72px; background: #fff;
	border: 1px solid #b6e9e4; border-radius: 18px; padding: 9px 14px;
	box-shadow: 0 10px 24px rgba(20, 153, 141, .10); text-align: left;
}
.wf-gate-benefit-icon {
	flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
	background: #ddf4ef; border: 1px solid #d9f3ef; border-radius: 26px;
}
.wf-gate-benefit-icon svg { width: 27px; height: 27px; display: block; }
.wf-gate-benefit-title { margin: 0; color: #14998d; font-weight: 900; font-size: 14px; line-height: 1.3; }

.wf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- 結果 ---------- */
.wf-results { margin-top: 22px; }
.wf-results-head {
	font-size: .82em; font-weight: 700; letter-spacing: .06em; color: var(--wf-green-d);
	margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--wf-border);
	display: flex; align-items: baseline; gap: 8px;
}
.wf-results-head b { font-family: var(--wf-num); font-size: 1.5em; color: var(--wf-ink); }
.wf-card {
	position: relative; display: flex; align-items: center; gap: 12px;
	border: 1px solid var(--wf-border); border-radius: 16px; padding: 13px 15px; margin-bottom: 10px;
	background: var(--wf-panel);
	opacity: 0; transform: translateY(10px);
	animation: wf-rise .45s cubic-bezier(.2, .7, .2, 1) forwards;
	transition: box-shadow .15s, border-color .15s, transform .15s;
}
.wf-card:hover { border-color: #b6e9e4; box-shadow: 0 10px 24px -16px rgba(38, 166, 154, .55); transform: translateY(-1px); }
.wf-rank {
	flex: 0 0 auto; font-family: var(--wf-num); font-weight: 800; font-size: 1.05em;
	color: var(--wf-green); min-width: 30px; text-align: center;
}
.wf-rank::before { content: "#"; font-size: .7em; color: var(--wf-ink-soft); margin-right: 1px; }
.wf-card-body { flex: 1 1 auto; min-width: 0; }
.wf-card-name { font-weight: 700; font-size: 1.04em; color: var(--wf-ink); margin-bottom: 6px; }
.wf-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chip {
	font-size: .73em; padding: 3px 9px; border-radius: 999px;
	background: #f3f8f6; border: 1px solid var(--wf-border); color: #45615b;
}
.wf-chip b { color: var(--wf-green-d); font-weight: 700; margin-right: 3px; }
.wf-chip.wf-chip-score { background: var(--wf-gold-l); border-color: #ecdcb6; color: var(--wf-gold); }
.wf-chip.wf-chip-score b { color: var(--wf-gold); }

.wf-empty { text-align: center; color: var(--wf-ink-soft); font-size: .9em; padding: 18px; }

/* ---------- モバイル ---------- */
@media (max-width: 600px) {
	.wf-app { margin: 22px auto; border-radius: 18px; }
	.wf-inner { padding: 20px 14px; }
	.wf-title { font-size: 1.22em; }
	.wf-grid { grid-template-columns: repeat(2, 1fr); gap: 9px 10px; }
	.wf-count-num { font-size: 3em; }
}
/* ゲートのSP調整（spi-mini.css 2065〜2069 相当） */
@media (max-width: 720px) {
	.wf-gate-card { padding: 28px 18px 26px; }
	.wf-gate-title-main { font-size: 21px; word-break: keep-all; overflow-wrap: anywhere; }
	.wf-line-btn-primary { max-width: none; }
	.wf-gate-field { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
	.wf-head, .wf-filters, .wf-count, .wf-reveal-btn, .wf-card, .wf-gate { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   v1.4.0 追加分 — フィルタ画面を「チップ選択＋社数ゲージ＋業界複数選択ドロップダウン」に刷新
   （旧ネイティブselect群・.wf-grid は使わなくなったが、後方互換のため未使用CSSとして残置）
   ============================================================ */

/* ---------- ヘッダー：コンパクトに ---------- */
/* タイトルヘッダー背景＝イラスト“透かし”（左:チェックリスト＋虫めがね / 右:ビル＋木）。
   箱に見せないための三段構え：
   ①カード地(--wf-paper)を画像背景#FBFBFBに合わせ、長方形の塗り差を消す
   ②::before レイヤーで opacity を落とし、文字の背景に溶ける“透かし”にする（背景画像は直接opacity不可のため別レイヤー）
   ③アートは縦50〜90%に集中（実測）。下端90%以降だけ soft mask でカード地へ溶かす（アートは削らない） */
.wf-app .wf-head {
	position: relative; z-index: 0;
	margin: 0 0 6px;
	padding: 10px 8px 34px;
}
.wf-app .wf-head::before {
	content: ""; position: absolute; inset: -6px -8px 0; z-index: -1; pointer-events: none;
	background: url(../head-bg.png) no-repeat center top;
	background-size: 100% auto;
	opacity: 1;
	/* Figma同様、イラストはそのまま表示（カード地#fbfcfc＝イラスト背景と同トーンで馴染む）。下端のみ軽くフェード */
	-webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
}
.wf-app .wf-eyebrow { font-size: 10.5px; margin-bottom: 6px; }
.wf-app .wf-title { font-size: 1.28em; margin-bottom: 6px; }
.wf-app .wf-lead { font-size: .78em; line-height: 1.7; }

/* ---------- フィルタ：連番ステップカード（①〜⑤）＋アイコン＋チップ選択 ---------- */
/* 外枠のカード地・枠・影は外し、各軸を独立した白カードに（画像デザイン準拠）。 */
.wf-app .wf-filters {
	background: none; border: 0; box-shadow: none; border-radius: 0;
	padding: 0; gap: 10px;
	counter-reset: wf-step;      /* 連番の起点。display:none の軸はカウントされない＝条件表示に強い */
}

/* 各軸＝白カード（番号バッジ｜本文の2カラム） */
.wf-axis {
	display: grid; grid-template-columns: auto 1fr; align-items: start;
	gap: 12px;
	background: var(--wf-panel);
	border: 1px solid var(--wf-mint);
	border-radius: 16px;
	padding: 13px 14px;
	box-shadow: 0 8px 20px rgba(20, 153, 141, .08);
}

/* 番号バッジ（ティール円・白抜き数字）。CSS カウンタで自動採番。 */
.wf-axis-num {
	counter-increment: wf-step; flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; margin-top: 1px;
	background: linear-gradient(180deg, #26A69A, #12a99d);
	color: #fff; border-radius: 50%;
	font-family: var(--wf-num); font-weight: 800; font-size: 14px; line-height: 1;
	box-shadow: 0 3px 8px rgba(18, 169, 157, .35);
}
.wf-axis-num::before { content: counter(wf-step); }

.wf-axis-main { min-width: 0; }
.wf-axis-label {
	display: flex; align-items: center; gap: 6px;
	font-size: .82em; font-weight: 700; letter-spacing: .02em;
	color: var(--wf-green-d); margin-bottom: 8px; min-height: 26px;
}
.wf-axis-icon { flex: none; width: 18px; height: 18px; display: block; color: var(--wf-teal); }
.wf-axis-label-text { display: inline-block; }
.wf-axis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-axis-chip {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
	color: #46615c; background: #fff;
	border: 1.5px solid #cdeee9; border-radius: 999px;
	padding: 8px 12px;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.wf-axis-chip:hover { border-color: var(--wf-teal); }
.wf-axis-chip:active { transform: scale(.95); }
.wf-axis-chip.is-on {
	background: var(--wf-teal); border-color: var(--wf-teal); color: #fff;
	box-shadow: 0 4px 10px rgba(18, 169, 157, .32);
}
/* 「指定なし」チップは選択中でも控えめ（デフォルト状態が悪目立ちしない） */
.wf-axis-chip[data-value=""].is-on {
	background: #eef6f4; border-color: #cdeee9; color: #6b8580; box-shadow: none;
}

/* ---------- 業界＝自前ドロップダウン（複数選択） ---------- */
.wf-cat-dd { position: relative; }

.wf-cat-dd-btn {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; box-sizing: border-box;
	min-height: 46px; padding: 10px 14px;
	font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; text-align: left;
	color: var(--wf-ink); background: var(--wf-field);
	border: 2px solid var(--wf-mint); border-radius: 14px;
	box-shadow: 0 2px 5px rgba(38, 166, 154, .06);
	transition: border-color .15s, box-shadow .15s;
}
.wf-cat-dd-btn:hover { border-color: #9fdfd8; }
.wf-cat-dd.is-open .wf-cat-dd-btn { border-color: var(--wf-teal); background: #fff; box-shadow: 0 0 0 4px var(--wf-mint-pale); }
.wf-cat-dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-cat-dd-arrow {
	flex: none; width: 9px; height: 9px;
	border-right: 2px solid var(--wf-teal); border-bottom: 2px solid var(--wf-teal);
	transform: rotate(45deg); transition: transform .15s;
}
.wf-cat-dd.is-open .wf-cat-dd-arrow { transform: rotate(-135deg); }

.wf-cat-dd-panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
	max-height: min(360px, 60vh); overflow-y: auto;
	background: #fff; border: 1.5px solid var(--wf-mint); border-radius: 16px;
	box-shadow: 0 16px 32px rgba(20, 100, 90, .18);
	padding: 8px;
	-webkit-overflow-scrolling: touch;
}
.wf-cat-dd-panel[hidden] { display: none; }

.wf-cat-dd-item {
	display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
	padding: 12px 10px; border-radius: 10px;
	font-size: 15px; font-weight: 600; color: var(--wf-ink);
	transition: background .12s;
}
.wf-cat-dd-item:hover { background: #f3fbf9; }
.wf-cat-dd-item input {
	flex: none; width: 19px; height: 19px; margin: 0; accent-color: var(--wf-teal); cursor: pointer;
}
.wf-cat-dd-item span:first-of-type { flex: 1; min-width: 0; }
.wf-cat-dd-n { flex: none; font-size: 12px; font-weight: 700; color: #8aa8a3; }
.wf-cat-dd-all { font-weight: 800; }
.wf-cat-dd-sep { height: 1px; background: #eaf3f1; margin: 4px 6px 6px; }

@media (max-width: 600px) {
	.wf-cat-dd-btn { font-size: 16px; padding: 11px 14px; }
	.wf-cat-dd-item { font-size: 14px; padding: 11px 8px; }
}

/* ---------- 社数ゲージ＝主役カード ---------- */
.wf-count-card {
	position: relative;
	margin-top: 12px; padding: 14px 16px 16px;
	background: #f4fbf9;
	border: 1px solid var(--wf-mint); border-radius: 18px;
	box-shadow: 0 6px 16px rgba(20, 153, 141, .07);
	text-align: center;
	opacity: 0; transform: translateY(12px);
	animation: wf-rise .65s cubic-bezier(.2, .7, .2, 1) .22s forwards;
}
.wf-app .wf-count { margin: 0; animation: none; opacity: 1; transform: none; }
.wf-app .wf-count-card .wf-count-figure { padding: 2px 8px 6px; }
.wf-app .wf-count-num { font-size: 2.7em; }
.wf-count-bar {
	position: relative; height: 8px; margin: 6px auto 4px; max-width: 300px;
	background: #ddf3f0; border-radius: 999px; overflow: hidden;
}
.wf-count-bar-fill {
	position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
	background: #12a99d;
	border-radius: 999px;
	transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.wf-count-caption { display: block; font-size: .72em; color: var(--wf-ink-soft); margin-bottom: 2px; }
.wf-count-caption b { color: var(--wf-ink); font-weight: 800; }

.wf-app .wf-count-card .wf-reveal-btn { margin-top: 10px; animation: none; opacity: 1; transform: none; }
.wf-app .wf-reveal-num { font-weight: 800; padding: 0 .12em; }

/* revealボタン：LINEアイコン無し版。ラベルは絶対配置をやめて自然な中央寄せ＋下向きキャレット */
.wf-reveal-btn-plain .wf-reveal-label {
	position: static; padding: 0; display: inline-flex; align-items: center; gap: 0;
}
.wf-reveal-caret {
	display: inline-block; width: 8px; height: 8px; margin-left: 9px;
	border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
	transform: translateY(-2px) rotate(45deg);
}

/* ---------- 0社ガード ---------- */
.wf-zero-hint {
	text-align: center; margin: 12px 0 -2px;
	font-size: 13px; font-weight: 700; color: var(--wf-red);
}
.wf-zero-hint[hidden] { display: none; }
.wf-reveal-btn[disabled] {
	background: #c7d4d1 !important; cursor: default; pointer-events: none;
	box-shadow: 0 5px 0 rgba(130, 148, 144, .35);
}
.wf-reveal-btn[disabled] .wf-line-mark { filter: grayscale(1); opacity: .55; }

/* ---------- 結果画面：条件を変えて戻るリンク ---------- */
.wf-back-row { margin: 0 0 2px; text-align: left; }
.wf-app.wf-result-active .wf-back-row { padding: 4px 4px 0; }
.wf-back-link {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 13px; font-weight: 700; color: #818181;
	text-decoration: none; padding: 6px 4px; cursor: pointer;
}
.wf-back-link:hover { color: var(--wf-teal); text-decoration: none; }

/* ---------- ゲート見出し下の「選んだ条件」recap ---------- */
.wf-gate-conds {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	margin: 14px 0 2px;
}
.wf-gate-conds[hidden] { display: none; }
.wf-gate-cond {
	font-size: 12px; font-weight: 700; line-height: 1;
	color: #0e8e84; background: #E4F8F6;
	border: 1px solid #b6e9e4; border-radius: 999px;
	padding: 6px 12px;
}

/* ---------- 解除後の成功カード（ゲートカードを畳んだ後に出す） ---------- */
.wf-unlock-done {
	width: 100%; max-width: 430px; box-sizing: border-box;
	background: #E4F8F6; border: 1px solid #b6e9e4; border-radius: 16px;
	padding: 16px 18px; text-align: center;
	color: #0e8e84; font-size: 14px; font-weight: 700; line-height: 1.8;
}
.wf-unlock-done b { color: #f56e05; font-size: 1.25em; padding: 0 .1em; }
.wf-unlock-done-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px;
	background: #12a99d; color: #fff; border-radius: 50%;
	font-size: 13px; font-weight: 900;
}

/* ---------- 結果リスト：スコア順表記＋ページング ---------- */
.wf-results-order {
	margin-left: auto; font-size: .82em; font-weight: 700; letter-spacing: .04em;
	color: var(--wf-ink-soft); background: var(--wf-mint-pale);
	border: 1px solid var(--wf-mint); border-radius: 999px; padding: 3px 10px;
}
.wf-more-btn {
	-webkit-appearance: none; appearance: none; cursor: pointer;
	display: block; width: 100%; margin: 14px 0 4px; padding: 15px;
	font-family: inherit; font-size: 14px; font-weight: 800;
	color: var(--wf-teal); background: #fff;
	border: 2px solid var(--wf-mint); border-radius: 14px;
	transition: border-color .15s, background .15s;
}
.wf-more-btn:hover { border-color: var(--wf-teal); background: var(--wf-mint-pale); }

/* ---------- 結果カード：業界を社名横の小ラベルに ---------- */
.wf-card-ind {
	display: inline-block; margin-left: 8px; padding: 2px 9px; vertical-align: 2px;
	font-size: .68em; font-weight: 700; line-height: 1.5;
	color: #818181; background: #f3f8f6;
	border: 1px solid #e3efec; border-radius: 999px;
}

/* ---------- モバイル（v1.4.0追加分） ---------- */
@media (max-width: 600px) {
	.wf-app .wf-inner { padding: 16px 12px; }
	.wf-axis { gap: 12px; padding: 13px 14px; }
	.wf-app .wf-count-num { font-size: 2.7em; }
	.wf-count-card { padding: 14px 16px 16px; }
	/* チップ・バッジ・タイトルはFigmaと同寸を維持（縮小しない） */
}

/* ============================================================
   テーマ干渉リセット（SANGO / .entry-content 対策）
   実記事に埋めるとテーマの h3 装飾（上下ボーダー等）や p のマージンが
   .wf-* に乗って崩れるため、記事内でも単体ページでも同じ見た目になるよう打ち消す。
   spi-reset.css と同じ思想（feedback_spi_plugin_theme_compat）。
   ============================================================ */

/* 見出し（.wf-title は h3）：テーマの装飾を全部落とす */
.wf-app .wf-title,
.entry-content .wf-app .wf-title {
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
	line-height: 1.42 !important;
	color: var(--wf-teal) !important;   /* <p>化に伴い .entry-content p の色/太さに勝たせる */
	font-weight: 700 !important;
}
.wf-app .wf-title::before,
.wf-app .wf-title::after { content: none !important; display: none !important; }
.wf-app .wf-title em,
.entry-content .wf-app .wf-title em { color: var(--wf-orange2) !important; font-style: normal !important; }

/* p：テーマ .entry-content p のマージンより勝つように .wf-app 前置で再宣言 */
.wf-app .wf-lead { margin: 0 auto; }
.wf-app .wf-gate-minute { margin: 0 0 2px; }
.wf-app .wf-gate-note { margin: 10px 0 20px; }
.wf-app p.wf-gate-error { margin: 8px 0 0; }
.wf-app p.wf-zero-hint { margin: 12px 0 -2px; }
.wf-app p.wf-back-row { margin: 0 0 2px; }

/* a：テーマのリンク下線・ボーダーを打ち消し */
.wf-app a.wf-back-link { border-bottom: none !important; box-shadow: none !important; text-decoration: none !important; }
/* LINE CTA はテーマの下線だけ殺し、立体二重シャドウ（段差）は絶対に保持する */
.wf-app a.wf-line-btn {
	border-bottom: none !important;
	text-decoration: none !important;
	box-shadow: 0 12px 22px rgba(3, 140, 56, .38), 0 6px 0 rgba(3, 102, 41, .6) !important;
}
.wf-app a.wf-line-btn:active { box-shadow: 0 6px 14px rgba(3, 140, 56, .3), 0 2px 0 rgba(3, 102, 41, .55) !important; }

/* form まわり：テーマの入力装飾を打ち消し（合言葉入力は自前スタイルのみ） */
.wf-app .wf-gate-form { margin: 18px 0 0; padding: 0; background: none; border: 0; }