/*!
 * resume.css — 履歴書作成（ステップウィザード）
 *   Phase 1：ページ枠＋進捗バー＋ナビ＋自動保存ステータス
 *   Phase 2 以降で各ステップの入力 UI を追加していく
 */

/* ============ ページ全体 ============ */
.resume-builder {
	max-width: 880px;
	margin: 0 auto;
	padding: 24px 16px 140px;     /* 下は固定ナビの高さ分を確保 */
	/* フォーム部分はゴシック体（明朝体はプレビュー/印刷部分の .rb-resume だけ） */
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
	color: var(--ink);

	/* ─── iOS 文字化け対策 ───
	   --font-display は Yusei Magic / Zen Kaku Gothic New（Google Web Font）を含むため、
	   一部の CJK 漢字が欠字となり iOS が絵文字フォントにフォールバックして文字化けする。
	   履歴書作成ページ内では --font-display と --font-body を Hiragino-first に上書きして
	   全要素を安全な日本語フォントに統一する（他ページの見た目には影響しない）。 */
	--font-display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
	--font-body:    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
}
/* ─── iOS 文字化け対策（強制）─── .resume-builder 配下の全要素に Hiragino を !important で強制。
   ただしプレビュー本体 .rb-resume / 絵文字（[aria-hidden="true"] 内）は除外する。 */
.resume-builder,
.resume-builder *:not(.rb-resume):not(.rb-resume *):not([aria-hidden="true"]):not([aria-hidden="true"] *) {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif !important;
}
/* iOS は form 系（textarea/input/select/button）にユーザーエージェント独自のフォントを当てるため、
   個別セレクタで明示上書き。さらに -webkit- 系のフォントスムージングも統一する。 */
.resume-builder textarea,
.resume-builder input,
.resume-builder select,
.resume-builder button,
.resume-builder option,
.resume-builder optgroup {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif !important;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}
/* プレビュー本体は明朝体を維持（!important で上書き戻す） */
.resume-builder .rb-resume,
.resume-builder .rb-resume * {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif !important;
}
/* フォーム内のラベル・ヒント・ボタンも全てゴシック体に強制 */
.resume-builder input,
.resume-builder select,
.resume-builder textarea,
.resume-builder button,
.resume-builder label,
.resume-builder .rb-field__label,
.resume-builder .rb-field__hint,
.resume-builder .rb-step__title,
.resume-builder .rb-step__desc,
.resume-builder .rb-final__btn,
.resume-builder .rb-final__hint,
.resume-builder .rb-collapse,
.resume-builder .rb-toast,
.resume-builder .rb-pdf-overlay {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
}
/* プレビュー（.rb-resume）だけは明朝体を維持 */
.resume-builder .rb-resume,
.resume-builder .rb-resume * {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* ============ パンくず ============ */
.rb-crumb {
	font-size: 12px;
	color: var(--ink2);
	margin-bottom: 16px;
}
.rb-crumb a { color: var(--ink2); text-decoration: none; }
.rb-crumb a:hover { text-decoration: underline; }
.rb-crumb__sep { margin: 0 6px; color: var(--ink3); }
.rb-crumb__cur { color: var(--ink); font-weight: 700; }

/* ============ ヘッダー ============ */
.rb-head {
	margin-bottom: 24px;
}
.rb-head__title {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 8px;
	letter-spacing: .02em;
}
.rb-head__lead {
	font-size: 14px;
	color: var(--ink2);
	line-height: 1.7;
	margin: 0;
}
.rb-head__lead b { color: var(--accent); }

/* ============ 進捗バー ============ */
.rb-progress {
	background: var(--paper);
	border: var(--bd-w) solid var(--ink5);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 24px;
}

/* 現在地カード：今このステップを書いている、と一目でわかる */
.rb-progress__current-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: linear-gradient(135deg, #fff3e0 0%, #ffece0 100%);
	border: 2px solid var(--accent);
	border-radius: 10px;
	margin-bottom: 14px;
	box-shadow: 0 2px 6px rgba(255, 107, 26, .12);
}
.rb-progress__current-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	flex-shrink: 0;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(255, 107, 26, .35);
}
.rb-progress__current-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rb-progress__current-step {
	font-size: 11px;
	color: var(--ink2);
	font-weight: 600;
	letter-spacing: .03em;
}
.rb-progress__current-step b { color: var(--accent); font-size: 14px; }
.rb-progress__current-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.2;
}

/* リアシュアバー：戻ってOK・自動保存 */
.rb-progress__reassure {
	margin: 10px 0 0;
	padding: 8px 12px;
	background: var(--paper2);
	border-radius: 8px;
	font-size: 12px;
	color: var(--ink2);
	text-align: center;
	line-height: 1.5;
}
.rb-progress__reassure b { color: var(--ink); font-weight: 700; }

/* 横長プログレスバー本体 */
.rb-progress__track {
	height: 8px;
	background: var(--paper2);
	border-radius: 999px;
	overflow: hidden;
}
.rb-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, #ff8c42 0%, #ff6b1a 100%);
	transition: width .3s ease;
	border-radius: 999px;
}

/* ステップアイコン列（横スクロール可・スマホで詰まらない） */
.rb-progress__steps {
	display: flex;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.rb-progress__steps::-webkit-scrollbar { display: none; }

.rb-progress__step {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 4px;
	font-size: 11px;
	color: var(--ink3);
	cursor: pointer;
	min-width: 60px;
	transition: color .2s ease;
}
.rb-progress__step:hover { color: var(--ink); }
.rb-progress__num {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--paper2);
	border: 1.5px solid var(--ink5);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	color: var(--ink);
	transition: all .25s ease;
}
.rb-progress__step.is-active .rb-progress__num {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	transform: scale(1.15);
	box-shadow: 0 2px 6px rgba(255, 107, 26, .35);
}
/* 完了状態：数字は残しつつ右上に小さな✓バッジを重ねる */
.rb-progress__step.is-done .rb-progress__num {
	background: #4caf50;
	color: #fff;
	border-color: #4caf50;
}
.rb-progress__step.is-done .rb-progress__num::after {
	content: '✓';
	position: absolute;
	top: -4px;
	right: -4px;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: #fff;
	color: #4caf50;
	border: 1.5px solid #4caf50;
	font-size: 9px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.rb-progress__lbl {
	font-weight: 600;
	white-space: nowrap;
}
.rb-progress__step.is-active .rb-progress__lbl { color: var(--accent); font-weight: 800; }

.rb-progress__counter {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ink2);
	text-align: center;
}
.rb-progress__counter b { color: var(--accent); font-size: 14px; }
.rb-progress__current-name {
	color: var(--ink);
	font-weight: 700;
	margin-left: 4px;
}

/* ============ ステップ本体 ============ */
.rb-form { display: block; }

.rb-step {
	display: none;
	background: var(--paper);
	border: var(--bd-w) solid var(--ink5);
	border-radius: 14px;
	padding: 24px 20px;
	animation: rbStepIn .3s ease-out;
}
.rb-step.is-active { display: block; }

@keyframes rbStepIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.rb-step__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1.5px dashed var(--ink5);
}
/* ステップ内ナビ（戻る/次へ）：各ステップの末尾に配置 */
.rb-step__nav {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px dashed #d8d0c0;
}
.rb-step__nav-btn {
	flex: 1;
	padding: 14px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	border: 0;
	transition: all .15s;
}
.rb-step__nav-btn--prev {
	background: #f3f3f3;
	color: #555;
}
.rb-step__nav-btn--prev:hover:not(:disabled) { background: #e8e8e8; }
.rb-step__nav-btn--next {
	background: var(--accent, #ff8a3d);
	color: #fff;
	box-shadow: 0 4px 14px rgba(255,138,61,.3);
}
.rb-step__nav-btn--next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,138,61,.4); }
.rb-step__nav-btn:disabled {
	opacity: .35;
	cursor: not-allowed;
	box-shadow: none;
}

.rb-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	flex-shrink: 0;
}
.rb-step__title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 2px;
	line-height: 1.3;
}
.rb-step__desc {
	font-size: 12px;
	color: var(--ink2);
	margin: 0;
	line-height: 1.5;
}

/* ============ フォーム要素（共通） ============ */
.rb-field {
	margin-bottom: 18px;
}
.rb-field__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
}
.rb-req {
	display: inline-block;
	font-size: 10px;
	color: #fff;
	background: #d9534f;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
	vertical-align: middle;
	font-weight: 700;
}
.rb-opt {
	display: inline-block;
	font-size: 10px;
	color: var(--ink2);
	background: var(--paper2);
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
	vertical-align: middle;
	font-weight: 700;
}
.rb-field__hint {
	font-size: 11px;
	color: var(--ink2);
	margin: 6px 0 0;
	line-height: 1.5;
}
.rb-field__hint b { color: var(--accent); }
/* スマホ・タブレットでは PC 限定の補足文を非表示（auto-select は iOS Safari で動かないため）*/
@media (max-width: 900px) {
	.rb-pc-only { display: none; }
}
/* スマホ専用の注釈（PC では非表示） */
.rb-mobile-only { display: none; }
@media (max-width: 900px) {
	.rb-mobile-only { display: block; }
}
/* ダウンロードボタン直前の自動削除チェック（控えめに） */
.rb-privacy-check--top {
	max-width: 520px;
	margin: 16px auto 8px;
	display: flex;
	justify-content: center;
}

/* プレビュー下の補助オプション（全削除ボタン）をコンパクトに中央配置
   ＊ 外枠は付けない（ボタン自身の点線枠が二重表示にならないように） */
.rb-final__options {
	margin: 16px auto 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
.rb-final__options .rb-privacy-check { margin: 0; }
.rb-final__options .rb-privacy-note { margin: 0; }
@media print {
	.rb-final__options { display: none !important; }
}

/* Excel スマホ表示ヒント：小さく・控えめに */
.rb-excel-mobile-hint {
	max-width: 520px;
	margin: 10px auto 0;
	padding: 8px 12px;
	background: #eef6ff;
	border-left: 3px solid #3b82f6;
	border-radius: 6px;
	color: #1e3a5f;
	font-size: 11.5px;
	line-height: 1.55;
}
.rb-excel-mobile-hint b { color: #1d4ed8; }
.rb-field__link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--accent);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.rb-field__link:hover { opacity: .8; }

.rb-input {
	display: block;
	width: 100%;
	font-family: var(--font-display);
	font-size: 16px;        /* iOS のズーム防止 */
	padding: 12px 14px;
	border: 1.5px solid var(--ink5);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rb-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(255, 140, 66, .15);
}
.rb-input::placeholder { color: var(--ink3); }
.rb-input--sm { width: auto; padding: 10px 8px; }

select.rb-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

/* 2列グリッド（スマホで自動1列に） */
.rb-grid {
	display: grid;
	gap: 12px;
}
.rb-grid--2 {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
	.rb-grid--2 { grid-template-columns: 1fr; }
}

/* 生年月日：select 3 つ＋年齢表示 */
.rb-date {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.rb-date select { min-width: 70px; }
.rb-age {
	margin-left: 8px;
	padding: 8px 12px;
	background: var(--paper2);
	border-radius: 6px;
	font-weight: 700;
	color: var(--ink);
	font-size: 14px;
}
.rb-age:has(:placeholder) { color: var(--ink3); }

/* 性別ラジオ */
.rb-radios {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.rb-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--paper);
	border: 1.5px solid var(--ink5);
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all .2s ease;
}
.rb-radio:hover { background: var(--paper2); }
.rb-radio input { margin: 0; accent-color: var(--accent); }
.rb-radio:has(input:checked) {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* 郵便番号セット */
.rb-zip {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.rb-zip__mark {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink2);
}
.rb-input--zip {
	width: auto;
	flex: 0 0 160px;
	font-variant-numeric: tabular-nums;
}
.rb-zip__btn {
	padding: 12px 16px;
	border: 1.5px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	border-radius: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}
.rb-zip__btn:hover { background: var(--paper2); }
.rb-zip__btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* 写真アップロード */
.rb-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.rb-photo__preview {
	position: relative;
	width: 150px;
	height: 200px;        /* 縦40×横30mm 比率（4:3 縦）*/
	border: none;
	border-radius: 8px;
	background: var(--paper2);
	margin-bottom: 10px;
	overflow: hidden;
}
/* placeholder をフレーム全面に広げて中央配置：余白部分（謎の枠）を消す */
.rb-photo__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	color: var(--ink3);
}
/* 画像表示時もフレーム全面 */
.rb-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rb-photo__img[hidden] { display: none !important; }
.rb-photo__icon { font-size: 44px; line-height: 1; margin: 0 0 6px; }
.rb-photo__placeholder-msg {
	font-size: 12px;
	font-weight: 600;
	margin: 0;
	color: var(--ink3);
}
.rb-photo__spec {
	font-size: 11px;
	color: var(--ink2);
	margin: 0 0 14px;
	text-align: center;
	line-height: 1.4;
}
.rb-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rb-photo__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.rb-photo__upload-btn {
	cursor: pointer;
	padding: 12px 22px;
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1.5px solid var(--accent);
	transition: transform .15s ease;
}
.rb-photo__upload-btn:hover { transform: translateY(-2px); }
.rb-photo__delete-btn {
	cursor: pointer;
	padding: 12px 18px;
	background: var(--paper);
	color: var(--ink);
	border: 1.5px solid var(--ink5);
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
}

/* 便利系のハイライト field（学校種類自動入力など） */
.rb-field--highlight {
	padding: 12px 14px;
	background: linear-gradient(135deg, #fff8e8, #fff3d6);
	border: 1.5px solid #ffce63;
	border-radius: 10px;
	margin-bottom: 14px;
}
.rb-field--highlight .rb-field__label { color: var(--ink); }

/* 注釈を入力欄の「上」に置く時用：マージン微調整 */
.rb-field__hint--top {
	margin: 6px 0 10px;
	padding: 10px 14px;
	background: #fffbeb;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	color: var(--ink);
	font-size: 12.5px;
	line-height: 1.6;
}
/* 短めの textarea（本人希望など 1〜2 行で済むもの用） */
.rb-input--textarea-sm {
	min-height: 80px !important;
}
/* textarea：自動拡張可・iOS ズーム防止のため 16px 必須 */
.rb-input--textarea {
	min-height: 320px;       /* 高さを 200 → 320px にさらに拡張 */
	resize: vertical;
	line-height: 1.7;
	font-size: 16px;         /* 14px だと iOS Safari が自動ズームしてしまう */
}

/* textarea 操作ボタン（全削除 / 1 つ前に戻す） */
.rb-textarea-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-bottom: 6px;
}
.rb-textarea-action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	background: #fff;
	border: 1px solid var(--ink5);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	color: var(--ink2);
	cursor: pointer;
	transition: all .15s ease;
}
.rb-textarea-action:hover:not(:disabled) {
	background: var(--paper2);
	color: var(--ink);
}
.rb-textarea-action--danger:hover:not(:disabled) {
	background: #fee;
	border-color: #d9534f;
	color: #d9534f;
}
.rb-textarea-action:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* 注釈テキスト内のインラインボタン（「貴社規定に従います」を入れる など） */
.rb-hint-btn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0 4px;
	padding: 3px 10px;
	background: #fff;
	border: 1.5px solid var(--accent);
	color: var(--accent);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	vertical-align: middle;
	transition: all .15s ease;
}
.rb-hint-btn:hover {
	background: var(--accent);
	color: #fff;
}

/* 一般チェックボックス群（希望の働き方など） */
.rb-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rb-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--paper);
	border: 1.5px solid var(--ink5);
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all .15s ease;
}
.rb-check:hover { background: var(--paper2); }
.rb-check input { margin: 0; accent-color: var(--accent); }
.rb-check:has(input:checked) {
	background: rgba(255, 140, 66, .12);
	border-color: var(--accent);
	color: var(--accent);
}
.rb-check--sm { padding: 6px 10px; font-size: 12px; border-radius: 999px; }

/* 都道府県マルチセレクトのグリッド（多数項目をコンパクトに） */
.rb-check-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 6px;
	max-height: 320px;
	overflow-y: auto;
	padding: 10px;
	background: var(--paper2);
	border-radius: 8px;
	border: 1px solid var(--ink5);
}
.rb-check-grid .rb-check {
	padding: 6px 8px;
	font-size: 12px;
	border-radius: 8px;
	justify-content: center;
}

/* クイック入力ボタン（職歴の最終学歴卒業翌月など） */
.rb-quick-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 16px;
	background: #fff;
	border: 1.5px solid var(--accent);
	color: var(--accent);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 4px;
	transition: all .15s ease;
}
.rb-quick-btn:hover {
	background: var(--accent);
	color: #fff;
}
.rb-quick-btn:active {
	transform: scale(.97);
}

/* ============ リスト型フィールド（学歴／職歴／資格） ============ */
.rb-list { display: block; }
.rb-list__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}
.rb-list__item {
	background: var(--paper2);
	border: 1.5px solid var(--ink5);
	border-radius: 10px;
	padding: 14px;
	position: relative;
}
.rb-list__item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.rb-list__item-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
}
.rb-list__remove {
	background: none;
	border: 1.5px solid var(--ink5);
	color: var(--ink2);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: all .15s ease;
}
.rb-list__remove:hover {
	background: #fee;
	border-color: #d9534f;
	color: #d9534f;
}
.rb-list__add {
	width: 100%;
	padding: 14px;
	background: var(--paper);
	border: 1.5px dashed var(--accent);
	color: var(--accent);
	border-radius: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}
.rb-list__add:hover { background: rgba(255, 140, 66, .08); }

/* 「職歴なし」「特になし」トグル */
.rb-toggle-empty {
	margin-bottom: 14px;
	padding: 10px 14px;
	background: var(--paper2);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rb-toggle-empty .rb-radio {
	padding: 6px 12px;
}
.rb-toggle-empty .rb-field__hint { margin: 0; }

/* リスト全体が無効化された時（職歴なし／特になし時） */
.rb-list.is-disabled {
	opacity: .4;
	pointer-events: none;
}

/* 年月のみの日付セット（生年月日と区別） */
.rb-date--ym select { flex: 1; }

/* 西暦/和暦切替対応の日付セット（資格の取得年月） */
.rb-date--era {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.rb-date--era .rb-input--era {
	flex: 0 0 auto;
	min-width: 84px;
}
.rb-date--era select { flex: 1 1 auto; min-width: 70px; }
.rb-date__sep {
	font-size: 13px;
	color: var(--ink2);
	font-weight: 600;
	flex: 0 0 auto;
}

/* 資格名プルダウン（候補から選ぶ）：通常 input の上に表示
   ＊ 押しやすいようボーダーをはっきり付ける（スマホで枠が薄いと触れにくい問題に対応）。 */
.rb-input--preset {
	margin-bottom: 8px;
	background: var(--paper2);
	font-size: 14px;
	font-weight: 600;
	border: 2px solid var(--accent);
	box-shadow: 0 0 0 1px var(--accent-light, rgba(255, 154, 0, .2));
	color: var(--ink);
	border-radius: 8px;
	padding: 12px 14px;
	min-height: 44px;
	cursor: pointer;
	transition: all .15s ease;
}
.rb-input--preset:hover {
	background: #fff;
	box-shadow: 0 0 0 3px var(--accent-light, rgba(255, 154, 0, .25));
}
.rb-input--preset:focus {
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 3px var(--accent-light, rgba(255, 154, 0, .35));
}

/* 製造業向け資格サジェスト */
.rb-suggest {
	margin-top: 18px;
	padding: 14px;
	background: linear-gradient(135deg, #fff8e8, #fff3d6);
	border: 1.5px solid #ffce63;
	border-radius: 10px;
}
.rb-suggest__title {
	font-size: 13px;
	font-weight: 800;
	color: var(--ink);
	margin: 0 0 4px;
}
.rb-suggest__hint {
	font-size: 11px;
	color: var(--ink2);
	margin: 0 0 10px;
	line-height: 1.4;
}
.rb-suggest__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.rb-suggest__chip {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	padding: 7px 11px;
	background: #fff;
	border: 1.5px solid var(--ink5);
	border-radius: 999px;
	color: var(--ink);
	cursor: pointer;
	transition: all .15s ease;
}
.rb-suggest__chip:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* 完成例文カード群（志望動機など）：2 列グリッドでコンパクト表示 */
.rb-suggest__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 6px;
}
.rb-suggest__card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: #fff;
	border: 1.5px solid var(--ink5);
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
	transition: all .15s ease;
	min-height: 56px;
}
.rb-suggest__card:hover {
	border-color: var(--accent);
	background: rgba(255, 140, 66, .05);
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.rb-suggest__card-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.3;
}
.rb-suggest__card-desc {
	font-size: 11px;
	color: var(--ink2);
	font-weight: 600;
	line-height: 1.3;
}
/* スマホでは説明文非表示、アイコン＋タイトルだけで超コンパクト */
@media (max-width: 600px) {
	.rb-suggest__cards { grid-template-columns: 1fr 1fr; }
	.rb-suggest__card { padding: 9px 10px; min-height: 0; }
	.rb-suggest__card-title { font-size: 12px; }
	.rb-suggest__card-desc { display: none; }
}

/* ============ Step 9 確認・出力（プレビュー + 印刷） ============ */
.rb-final {
	display: flex;
	flex-direction: column;
	align-items: center;            /* 子要素をすべて中央寄せ */
	gap: 14px;
}
/* プレビュー本体と注釈は全幅を維持（中央寄せ親の制約を解除）
   ⚠️ .rb-resume-paper（紙ラッパー）を忘れると、align-items:center により
      ラッパーが中身の固定幅（スマホ600px）に膨らんで画面からはみ出す（2026-07-06 修正） */
.rb-final > .rb-resume-paper,
.rb-final > .rb-resume,
.rb-final > .rb-preview-note,
.rb-final > .rb-pdf-overlay,
.rb-final > .rb-toast,
.rb-final > .rb-final__warnings {
	align-self: stretch;
	width: 100%;
}

/* 出力ボタン群
   ・モバイル：PDF + Excel を 2 列横並び（印刷は rb-pc-only で非表示）
   ・PC：PDF + Excel + 印刷 の 3 ボタン横並び */
.rb-final__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}
@media (min-width: 901px) {
	.rb-final__actions {
		grid-template-columns: 1fr 1fr 1fr;   /* PC は 3 列 */
		max-width: 720px;                       /* 3 ボタン用に少し広く */
	}
}
/* 印刷ボタン（PC 時は他と並ぶ・モバイルは rb-pc-only で非表示）
   うっすらボタンっぽく：明るい背景 + ライト枠 + 控えめな影 */
.rb-final__btn[data-rb-action="print"] {
	background: #fafafa;
	border: 1.5px solid #d4d4d4;
	color: var(--ink2);
	box-shadow: 2px 2px 0 #d4d4d4;
	font-size: 13px;
}
.rb-final__btn[data-rb-action="print"]:hover:not(:disabled) {
	background: var(--paper);
	border-color: var(--ink5);
	color: var(--ink);
	box-shadow: 2px 4px 0 #b4b4b4;
}
.rb-final__btn {
	padding: 14px 12px;
	background: var(--paper);
	border: 1.5px solid var(--ink5);
	border-radius: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}
.rb-final__btn:hover:not(:disabled) {
	background: var(--paper2);
	transform: translateY(-2px);
}
.rb-final__btn--primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 3px 3px 0 var(--ink);
}
.rb-final__btn--primary:hover:not(:disabled) {
	box-shadow: 3px 5px 0 var(--ink);
}
.rb-final__btn--excel {
	background: #1f7a3f;
	color: #fff;
	border-color: #1f7a3f;
	box-shadow: 3px 3px 0 var(--ink);
}
.rb-final__btn--excel:hover:not(:disabled) {
	background: #25924a;
	border-color: #25924a;
	box-shadow: 3px 5px 0 var(--ink);
}
.rb-final__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* ━━━ 直接送る相談ブロック（メール添付・完全自動）
   周囲のオレンジ CTA と被らないよう、紙色＋細いインクボーダーで落ち着いた見た目に。
   ボタンも影なしのフラットスタイル。 */
.rb-final__send-block {
	margin: 22px 0 8px;
	padding: 16px 18px 18px;
	border: 1.5px solid var(--ink, #26241F);
	border-radius: 8px;
	background: var(--paper2, #F1EBDB);
}
.rb-final__send-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	font-size: 15px;
	margin-bottom: 6px;
	color: var(--ink, #26241F);
}
.rb-final__send-ico { font-size: 20px; }
.rb-final__send-title { line-height: 1.3; }
.rb-final__send-desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink2, #5C5648);
	margin: 0 0 12px;
}
.rb-final__btn--send {
	display: block;
	width: 100%;
	background: var(--ink, #26241F);
	color: #fff;
	border: 1.5px solid var(--ink, #26241F);
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.rb-final__btn--send:hover:not(:disabled) {
	background: var(--ink2, #5C5648);
}
.rb-final__btn--send:disabled {
	opacity: .6;
	cursor: progress;
}
@media (max-width: 480px) {
	.rb-final__send-block { padding: 13px 14px 14px; }
	.rb-final__send-head  { font-size: 14px; }
	.rb-final__send-desc  { font-size: 12px; }
	.rb-final__btn--send  { font-size: 14px; padding: 11px 12px; }
}
/* スマホでフォントサイズ少し小さく（アイコン+短文が収まるよう） */
@media (max-width: 480px) {
	.rb-final__btn { font-size: 13px; padding: 12px 6px; }
	.rb-final__btn[data-rb-action="print"] { font-size: 12px; padding: 8px 18px; max-width: 200px; }
}
.rb-final__hint {
	text-align: center;
	font-size: 12px;
	color: var(--ink2);
	margin: 0;
}
.rb-final__hint b { color: var(--accent); }

/* 入力漏れ警告 */
.rb-final__warnings {
	background: #fff3cd;
	border: 1.5px solid #ffc107;
	border-radius: 10px;
	padding: 14px;
}
.rb-final__warn-title { margin: 0 0 8px; font-weight: 800; color: #856404; font-size: 13px; }
.rb-final__warnings ul { margin: 0 0 8px; padding-left: 20px; font-size: 12px; color: #856404; }
.rb-final__warn-hint { margin: 0; font-size: 11px; color: #856404; }

/* ============ 履歴書プレビュー：紙の見た目はラッパー（.rb-resume-paper）に持たせる ============
   ⚠️ .rb-resume 本体に border / box-shadow / 大きな padding を付けると
      html2pdf（html2canvas）の PDF キャプチャ位置が壊れる回帰があったため、
      紙の余白・縁取り・影は外側の .rb-resume-paper に付ける（2026-07-06 確定） */
.rb-resume-paper {
	background: #fff;
	padding: 9mm 11mm;    /* 紙の余白（本体の padding 4mm と合わせて約13〜15mm の余白感） */
	border: 1px solid #e6e0d4;
	border-radius: 2px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
	box-sizing: border-box;   /* width:100% 時に padding 分はみ出さないように */
	min-width: 0;
}

/* ============ 履歴書プレビュー本体（A4横向き 2カラム・添付2 完全再現） ============ */
.rb-resume {
	background: #fff;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
	color: #111;
	font-size: 10pt;
	line-height: 1.45;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* 左右 50:50（ユーザー要望で 1.42:1 から戻した） */
	gap: 3mm;
	padding: 4mm;
	box-sizing: border-box;
	width: 100%;
}
.rb-resume__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* デフォルトは overflow: visible（プレビューで隠れないように） */
}
/* col-inner は実体のある flex コンテナ（natural height） */
.rb-resume__col-inner {
	display: flex;
	flex-direction: column;
	gap: 2mm;
	min-width: 0;
	/* デフォルトは flex なし → 自然な高さで積み上げ */
}

/* 1ブロック共通：外枠は実線、内部は点線 */
.rb-resume__block {
	border: 1.2px solid #000;
	display: flex;
	flex-direction: column;
	background: #fff;
	min-width: 0;
	/* デフォルトは overflow: visible（プレビューで自然な高さに） */
}
/* .rb-resume__grow は PDF/印刷モードでのみ flex:1 を適用（CSS下部参照） */

/* ブロック内テーブル */
.rb-resume__inner {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	height: 100%;
}
.rb-resume__inner th,
.rb-resume__inner td {
	border: 0;
	border-right: 1px dotted #777;
	border-bottom: 1px dotted #777;
	padding: 4px 7px;
	vertical-align: middle;
	text-align: left;
	font-weight: normal;
	font-size: 10pt;
	line-height: 1.45;
}
.rb-resume__inner td:last-child,
.rb-resume__inner th:last-child { border-right: 0; }
.rb-resume__inner tr:last-child td,
.rb-resume__inner tr:last-child th { border-bottom: 0; }
.rb-resume__inner th {
	background: transparent;
	font-weight: 500;
	white-space: nowrap;
	text-align: left;
}

/* ─── プロフィール表 ─── */
.rb-resume__inner--profile {}
.rb-resume__title-cell {
	border-bottom: 1px dotted #777 !important;  /* 履歴書タイトル下（フリガナ上）に横線 */
	border-right: 0 !important;                 /* 縦線は不要（横線だけ） */
	padding: 5px 10px 4px !important;
	vertical-align: middle;
}
.rb-resume__title {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .35em;
	margin-right: 1em;
}
.rb-resume__date { font-size: 10pt; color: #222; }

.rb-resume__photo-cell {
	padding: 3px !important;
	text-align: center;
	/* 上端アラインで写真をセルの上に詰める（中央寄せだと上に空白が出てたため） */
	vertical-align: top;
}
/* 画面プレビューの写真は PDF 出力（.rb-resume--for-pdf）と同じ見た目に統一（2026-07-06）
   ・高さ 38mm 固定・中央寄せ・比率維持の contain */
.rb-resume__photo {
	width: 100%;
	min-height: 38mm;
	max-height: 38mm;
	background: #fff;
	border: 1px solid #aaa;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.rb-resume__photo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	background: #fff;
}
.rb-resume__photo-ph { font-size: 10px; color: #999; }

.rb-resume__lbl-sm    { font-size: 9pt; color: #333; padding: 2px 7px !important; }
/* フリガナの値は小さめ（履歴書の慣例。全角カタカナ化で大きく見えるようになったため明示） */
.rb-resume [data-rb-out="name_kana"],
.rb-resume [data-rb-out="addr_kana"],
.rb-resume [data-rb-out="contact_kana"] { font-size: 8pt; }
.rb-resume__lbl-sex   { font-size: 8.5pt; text-align: center !important; }
.rb-resume__val-sex   { text-align: center; }
.rb-resume__lbl-side  { font-size: 9pt; text-align: center !important; padding: 4px 6px !important; }
.rb-resume__name-cell { font-size: 14pt; font-weight: 600; padding: 6px 14px !important; letter-spacing: .15em; }
.rb-resume__date-cell { font-size: 11pt; padding: 5px 10px !important; }
.rb-resume__addr-cell {
	vertical-align: top;
	padding: 4px 8px !important;
	line-height: 1.6;
	position: relative;
	min-height: 14mm;
}
.rb-resume__zip { font-size: 10pt; }
.rb-resume__addr-text { font-size: 10pt; margin-top: 2px; }
.rb-resume__addr-cell--contact { min-height: 12mm; }
.rb-resume__placeholder {
	color: #999;
	font-size: 7pt;           /* 9pt → 7pt：「（現住所以外に〜）」が 1 行で収まるサイズに */
	white-space: nowrap;      /* 折り返し禁止 */
}
.rb-resume__hou {
	position: absolute;
	right: 8px;
	bottom: 4px;
	font-size: 10pt;
	color: #444;
}

/* ─── 学歴・職歴 / 免許資格 ─── */
.rb-resume__inner--history thead th {
	background: transparent;
	text-align: center !important;
	font-weight: 600;
	border-bottom: 1px solid #444 !important;
	padding: 3px 6px !important;
	font-size: 9pt;
	white-space: normal;          /* 狭い列幅でも折り返す */
	line-height: 1.25;
}
.rb-resume__inner--history tbody td {
	padding: 3px 8px;
	height: 22px;
}
.rb-resume__inner--history tbody td:nth-child(1),
.rb-resume__inner--history tbody td:nth-child(2) {
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.rb-resume__row-center { text-align: center !important; font-weight: 600; }
.rb-resume__row-end    { text-align: right !important; padding-right: 14px !important; }
.rb-resume__grow .rb-resume__inner--history { height: 100%; }

/* ─── 志望動機・本人希望 ブロック（テーブルではない） ─── */
.rb-resume__block-label {
	background: transparent;
	border-bottom: 1px dotted #777;
	padding: 4px 9px;
	font-size: 9.5pt;
	font-weight: 600;
	line-height: 1.35;
}
.rb-resume__sub {
	font-weight: 400;
	font-size: 8pt;
	margin-left: .2em;
	color: #555;
}
.rb-resume__block-body {
	padding: 6px 10px;
	white-space: pre-wrap;
	line-height: 1.7;
	flex: 1;
	min-height: 28mm;
	font-size: 9.5pt;
	overflow-wrap: anywhere;
}
.rb-resume__block-body--sm { min-height: 18mm; }

/* 末尾の補足 */
.rb-resume__note {
	font-size: 8pt;
	color: #555;
	margin: 1mm 0 0;
}

/* ─── PC（901px 以上）：A4横の比率（297:210）で表示・blocks は充填 ─── */
@media (min-width: 901px) {
	/* Step 9 を含めて、PC ではコンテナを広く取って A4 プレビューが映える幅に */
	.resume-builder { max-width: 1280px; }
	/* プレビューは A4 横の比率を固定。grid 行も比率に応じて確定する */
	.rb-resume {
		aspect-ratio: 297 / 210;
		max-width: 100%;
		margin: 0 auto;
	}
	/* PDF と同じ充填挙動：左右カラム内で grow ブロックが残り高さを埋める */
	.rb-resume .rb-resume__col       { overflow: hidden; min-height: 0; }
	.rb-resume .rb-resume__col-inner { flex: 1 1 0; min-height: 0; }
	.rb-resume .rb-resume__grow      { flex: 1 1 0; min-height: 0; }
	.rb-resume .rb-resume__block     { overflow: hidden; }
}

/* ─── スマホ／タブレット：左ページ・右ページに分けて 横スクロール ─── */
@media (max-width: 900px) {
	/* モバイルは従来のカード式 UI（紙ラッパーは無効化） */
	.rb-resume-paper {
		background: transparent;
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.rb-resume {
		display: block;
		padding: 0;
		gap: 0;
		background: transparent;
	}
	.rb-resume__col {
		position: relative;
		display: block;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		border: 1px solid #d6d6d6;
		border-radius: 6px;
		margin-bottom: 14px;
		box-shadow: 0 2px 6px rgba(0,0,0,.05);
		min-height: 0;
	}
	/* 各ページの見出しバー（スクロール時も固定） */
	.rb-resume__col::before {
		content: "← 左右にスクロールできます ─ " attr(data-page-label);
		display: block;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 3;
		padding: 7px 12px;
		background: #fff4d6;
		color: #876300;
		font-size: 11px;
		font-weight: 600;
		border-bottom: 1px solid #f0d784;
		border-radius: 5px 5px 0 0;
		white-space: nowrap;
	}
	/* 各ページの中身：A4 横の左/右半分に近い固定幅 */
	.rb-resume__col-inner {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 10px;
		flex: none;
		min-height: 0;
	}
	.rb-resume__col--left  .rb-resume__col-inner { width: 600px; }
	.rb-resume__col--right .rb-resume__col-inner { width: 440px; }
	/* スマホでも fontsize はそのまま（A4と同じ見え方） */
	.rb-resume__inner th,
	.rb-resume__inner td { font-size: 10pt; }

	/* スマホは natural height（デフォルト挙動）でOK */
	.rb-resume__grow .rb-resume__block-body { min-height: 90px; }
}

/* タイトルセルが狭い幅で折り返さないように */
.rb-resume__title-cell {
	white-space: nowrap;
}
.rb-resume__title-cell .rb-resume__title,
.rb-resume__title-cell .rb-resume__date { white-space: nowrap; }

/* ─── PDF 生成中：A4横向き ぴったりサイズに固定 ───
   html2pdf(0.10.1) は要素の複製を「PDFページ内寸幅（A3-余白=390mm）のコンテナ」に
   入れてキャプチャするため、キャンバス切り取り幅（A4=297mm）とズレてオフセットが出る。
   ↓ の .html2pdf__overlay スコープ規則で「不可視オーバーレイ内の複製だけ」を
   (0,0) に固定してズレを解消する（画面上の本体は動かない）。 */
.html2pdf__overlay .rb-resume--for-pdf {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
}
.rb-resume--for-pdf {
	display: grid !important;
	width: 297mm !important;
	height: 210mm !important;
	max-width: none !important;
	padding: 5mm !important;
	gap: 3mm !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;  /* 左右 50:50 統一（プレビューと同じ）*/
	font-size: 9.5pt !important;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	/* 画面用の「紙の縁取り・影」は PDF に写り込むため無効化 */
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.rb-resume--for-pdf .rb-resume__col {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}
.rb-resume--for-pdf .rb-resume__col::before { display: none !important; }  /* ページラベル非表示 */
.rb-resume--for-pdf .rb-resume__col-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 2mm !important;
	flex: 1 1 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
}
/* PDF/印刷モードでは、grow ブロックが残り高さを充填する */
.rb-resume--for-pdf .rb-resume__grow {
	flex: 1 1 0 !important;
	min-height: 0 !important;
}
.rb-resume--for-pdf .rb-resume__block {
	overflow: hidden !important;
}
.rb-resume--for-pdf .rb-resume__photo {
	min-height: 38mm;
	/* html2canvas は object-fit のサポートが不安定なため、flex + max-* で確実なフィットに */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	background: #fff !important;
}
.rb-resume--for-pdf .rb-resume__photo img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
}

/* ============ @media print：A3 横向き ぴったり（PDFと同じレイアウト） ============ */
@page {
	size: A3 landscape;
	margin: 0;
}
@media print {
	/* ━━━━━━━━━━ 履歴書プレビューだけを 1 ページに印刷 ━━━━━━━━━━
	   履歴書本体以外のすべての UI 要素を非表示にし、祖先要素は余白を 0 に。 */

	/* 非表示にする要素一覧（具体名で列挙して確実性を上げる） */
	.topbar,
	.site-header,
	.site-footer,
	.line-cta,
	.mobile-menu,
	.mobile-menu__overlay,
	.float-cta,
	.float-cta--solo,
	.float-search,
	.float-top,
	.float-fav,
	#wpadminbar,
	header.global-header,
	footer.global-footer,
	.rb-head,
	.rb-progress,
	.rb-nav,
	.rb-save-status,
	.rb-step__head,
	.rb-step__nav,
	.rb-privacy-check,
	.rb-final__actions,
	.rb-final__hint,
	.rb-final__warnings,
	.rb-privacy-note,
	.rb-preview-note,
	.rb-pdf-overlay,
	.rb-toast,
	.rb-step:not(.is-active) {
		display: none !important;
	}

	/* html/body 完全固定 + 白背景で全面カバー（デスクトップ透け防止）
	   A3 横 = 420 × 297mm。高さは 296mm にして 2 ページ目化を防止。
	   中央寄せ＆余白は下の .rb-final（履歴書の直接の親）で行う。 */
	html, body {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		width: 420mm !important;
		height: 296mm !important;        /* A3 横 297mm より 1mm 小さくして安全マージン */
		max-width: 420mm !important;
		max-height: 296mm !important;
		min-height: 0 !important;
		overflow: hidden !important;
		position: relative !important;
		box-sizing: border-box !important;
		page-break-inside: avoid !important;
		page-break-after: avoid !important;
	}
	/* 祖先要素：高さ 0 にして紙面占有なし（紙ラッパーも含む） */
	main.resume-builder,
	.rb-form,
	.rb-step.is-active,
	.rb-final,
	.rb-resume-paper {
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		max-width: none !important;
		max-height: 0 !important;
		min-height: 0 !important;
		height: 0 !important;
		gap: 0 !important;
		animation: none !important;
		display: block !important;
		overflow: visible !important;
		page-break-inside: avoid !important;
		page-break-after: avoid !important;
	}

	/* 履歴書本体：A4 サイズ(297×208mm)を zoom:1.414 で A3 いっぱいに拡大。
	   ・transform ではなく zoom を使う理由：zoom は「レイアウト上のサイズ」も拡大するため
	     実寸が A3(420×294mm) になり、A4 用紙を選んでもブラウザの「用紙に合わせる」で
	     自動的に 1 枚に縮小フィットする（transform だとレイアウトは A4 のままで自動縮小が効かない）
	   ・アスペクト比は A4横=A3横=√2 で同一なので歪みなし
	   ・文字・罫線・余白すべて均等に 1.414 倍になり、実物大の A3 履歴書になる
	   ・position:absolute + body(relative) でページ左上を基準に配置（fixed だと縮小フィットを妨げる）
	   ・background:#fff で全面を不透明に覆い、デスクトップの透けを防ぐ */
	/* ━━ 背景ゴミ対策（定石の visibility 分離）━━
	   固定配置のボタン等が紙面に残るのを防ぐため、
	   「全部 visibility:hidden → 履歴書だけ visible」で履歴書以外を完全に消す。 */
	body * { visibility: hidden !important; }
	.rb-resume, .rb-resume * { visibility: visible !important; }

	.rb-resume {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;  /* 印刷も 50:50 統一 */
		position: absolute !important;    /* body(relative) 基準で確実に配置 */
		top: 11.3mm !important;           /* transform は top/left に影響しない → 実寸そのまま */
		left: 14mm !important;            /* 左右余白 14mm・上下余白 約11.3mm で均等 */
		right: auto !important;
		bottom: auto !important;
		width: 297mm !important;
		height: 208mm !important;
		max-width: 297mm !important;
		max-height: 208mm !important;
		padding: 5mm !important;
		gap: 3mm !important;
		font-size: 9.5pt !important;
		background: #fff !important;
		transform: scale(1.319) !important;       /* (420-14×2)/297 ＝ A3 に余白付きで収まる倍率 */
		transform-origin: top left !important;
		page-break-inside: avoid !important;
		page-break-after: avoid !important;
		margin: 0 !important;
		box-shadow: none !important;
		border: none !important;          /* 画面用の紙の縁取りが印刷に写り込まないように */
		border-radius: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		aspect-ratio: auto !important;
		z-index: 2147483647 !important;   /* 他要素より前面 */
	}
	/* カラム：モバイル CSS の border / overflow-x / background をリセット */
	.rb-resume__col {
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		overflow-x: hidden !important;
		min-height: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* ラベルバーは非表示 */
	.rb-resume__col::before { display: none !important; }
	/* col-inner：モバイルの width:600px/440px を解除して flex で充填 */
	.rb-resume__col-inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 2mm !important;
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.rb-resume__grow { flex: 1 1 0 !important; min-height: 0 !important; }
	.rb-resume__block { overflow: hidden !important; }
	.rb-resume__photo { min-height: 38mm !important; }
	.rb-resume__inner { page-break-inside: auto; }
	.rb-resume__inner tr { page-break-inside: avoid; }
}

/* ============ 折りたたみアコーディオン（連絡先などで使用） ============ */
.rb-collapse {
	border: 1.5px dashed var(--ink5, #d0c8be);
	border-radius: 10px;
	background: var(--paper2, #faf5ed);
	margin: 16px 0 8px;
	overflow: hidden;
	transition: background .15s;
}
.rb-collapse[open] {
	background: #fff;
	border-style: solid;
	border-color: var(--accent, #ff8a3d);
}
.rb-collapse__summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink, #2a2a2a);
	user-select: none;
}
.rb-collapse__summary::-webkit-details-marker { display: none; }
.rb-collapse__summary::marker { content: ''; }
.rb-collapse__icon { font-size: 18px; flex-shrink: 0; }
.rb-collapse__title { flex: 1; line-height: 1.4; }
.rb-collapse__chev {
	font-size: 10px;
	color: var(--ink3, #8b8378);
	transition: transform .2s;
	flex-shrink: 0;
}
.rb-collapse[open] .rb-collapse__chev { transform: rotate(180deg); }
.rb-collapse__body {
	padding: 4px 16px 16px;
	border-top: 1px dashed var(--ink5, #d0c8be);
	margin-top: 0;
	animation: rbCollapseIn .25s ease-out;
}
@keyframes rbCollapseIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.rb-collapse__note {
	font-size: 12px;
	color: var(--ink2, #555);
	margin: 12px 0 16px;
	line-height: 1.6;
	background: #fff8e8;
	padding: 8px 12px;
	border-radius: 6px;
	border-left: 3px solid #f0c060;
}

/* ============ プライバシー：自動削除チェックボックス（DLボタンの上） ============ */
.rb-privacy-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	margin: 0 0 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 11px;
	color: #888;
	line-height: 1.4;
}
.rb-privacy-check input { position: absolute; opacity: 0; pointer-events: none; }
.rb-privacy-check__box {
	width: 15px;
	height: 15px;
	border: 1.5px solid #c8c0b4;
	border-radius: 3px;
	background: #fff;
	flex-shrink: 0;
	position: relative;
	transition: all .12s;
}
.rb-privacy-check:hover .rb-privacy-check__box { border-color: #888; }
.rb-privacy-check input:checked + .rb-privacy-check__box {
	background: #16a34a;
	border-color: #16a34a;
}
.rb-privacy-check input:checked + .rb-privacy-check__box::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-weight: 900;
	font-size: 10px;
	line-height: 1;
}
.rb-privacy-check__label {
	color: #888;
	font-size: 11px;
}

/* ============ 削除ボタン（控えめ・テキストリンク調） ============ */
.rb-privacy-note {
	margin: 20px 0 4px;
	text-align: center;
}
.rb-privacy-note__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	background: transparent;
	border: 1px dashed #c0c0c0;
	color: #888;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
}
.rb-privacy-note__btn:hover {
	background: #fff5f5;
	border-color: #dc2626;
	color: #dc2626;
}
.rb-privacy-note__hint {
	margin: 6px 0 0;
	font-size: 10.5px;
	color: #aaa;
}

/* プレビュー上の注釈：入力項目確認用バナー */
.rb-preview-note {
	max-width: 720px;
	margin: 24px auto 12px;
	padding: 10px 18px;
	background: #fff7ed;
	border: 1.5px dashed #fb923c;
	border-radius: 10px;
	font-size: 13px;
	color: #9a3412;
	text-align: center;
	font-weight: 600;
	line-height: 1.6;
}
.rb-preview-note b { color: #c2410c; }
@media print {
	.rb-preview-note { display: none; }
}

/* ============ ボタンのダウンロード中アニメ ============ */
.rb-final__btn.is-loading {
	opacity: .85;
	cursor: progress;
	animation: rbBtnPulse 1.2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes rbBtnPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}

/* ============ PDF 生成中オーバーレイ ============ */
.rb-pdf-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .72);  /* blur廃止のぶん少し濃く */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	/* backdrop-filter: blur は PDF 生成（巨大 canvas 処理）中の GPU 合成負荷が大きく
	   タブクラッシュの一因になるため廃止（2026-07-06） */
	animation: rbOverlayIn .2s ease-out;
}
.rb-pdf-overlay[hidden] { display: none; }
@keyframes rbOverlayIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.rb-pdf-overlay__box {
	background: #fff;
	border-radius: 18px;
	padding: 36px 52px;
	text-align: center;
	box-shadow: 0 12px 48px rgba(0,0,0,.35);
	min-width: 280px;
	max-width: 90vw;
	animation: rbBoxIn .3s ease-out;
}
@keyframes rbBoxIn {
	from { transform: scale(.9); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}
.rb-pdf-overlay__spinner {
	width: 56px;
	height: 56px;
	border: 5px solid #f0e8de;
	border-top-color: var(--accent, #ff8a3d);
	border-radius: 50%;
	animation: rbSpin .8s linear infinite;
	margin: 0 auto 18px;
}
@keyframes rbSpin {
	to { transform: rotate(360deg); }
}
.rb-pdf-overlay__msg {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #2a2a2a;
}
.rb-pdf-overlay__hint {
	font-size: 12px;
	color: #888;
	margin: 0;
}

/* ============ 完了トースト ============ */
.rb-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #16a34a;
	color: #fff;
	padding: 14px 24px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 28px rgba(0,0,0,.25);
	z-index: 99998;
	animation: rbToastIn .35s cubic-bezier(.34, 1.56, .64, 1);
	max-width: 90vw;
}
.rb-toast[hidden] { display: none; }
.rb-toast--error { background: #dc2626; }
@keyframes rbToastIn {
	from { transform: translate(-50%, -80px); opacity: 0; }
	to   { transform: translate(-50%, 0);     opacity: 1; }
}
.rb-toast--leaving {
	animation: rbToastOut .25s ease-in forwards;
}
@keyframes rbToastOut {
	to { transform: translate(-50%, -80px); opacity: 0; }
}
.rb-toast__icon { font-size: 22px; line-height: 1; }
.rb-toast__msg  { line-height: 1.4; }

/* ============ プレースホルダ（Phase 1 用） ============ */
.rb-placeholder {
	text-align: center;
	padding: 40px 20px;
	background: var(--paper2);
	border-radius: 10px;
	border: 1.5px dashed var(--ink5);
}
.rb-placeholder__icon {
	font-size: 40px;
	margin-bottom: 12px;
	opacity: .8;
}
.rb-placeholder__msg {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 8px;
}
.rb-placeholder__sub {
	font-size: 12px;
	color: var(--ink2);
	margin: 0;
	line-height: 1.6;
}

/* ============ 固定ナビ（下部・親指圏） ============ */
.rb-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	border-top: var(--bd-w) solid var(--ink5);
	padding: 12px 16px;
	display: flex;
	gap: 12px;
	z-index: 50;
	justify-content: center;
}
.rb-nav__btn {
	flex: 1;
	max-width: 200px;
	padding: 14px 20px;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	background: var(--paper);
	color: var(--ink);
}
.rb-nav__btn--prev {
	background: var(--paper);
	color: var(--ink2);
}
.rb-nav__btn--next {
	background: var(--accent);
	color: #fff;
	border-color: var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
}
.rb-nav__btn--next:hover { transform: translateY(-2px); box-shadow: 4px 6px 0 var(--ink); }
.rb-nav__btn--next:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.rb-nav__btn:disabled {
	opacity: .4;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
}

/* ============ 自動保存ステータス（右下小さくフロート） ============ */
.rb-save-status {
	position: fixed;
	right: 16px;
	bottom: 88px;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	z-index: 49;
	transition: opacity .3s ease;
	pointer-events: none;
}
.rb-save-status.is-hidden { opacity: 0; }
.rb-save-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #ccc;
}
.rb-save-status.is-saving  .rb-save-status__dot { background: #ffc107; animation: rbBlink 1s ease-in-out infinite; }
.rb-save-status.is-saved   .rb-save-status__dot { background: #4caf50; }

@keyframes rbBlink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .3; }
}

/* ============ レスポンシブ ============ */
@media (max-width: 600px) {
	.resume-builder { padding: 16px 12px 120px; }
	.rb-step { padding: 18px 14px; }
	.rb-step__title { font-size: 17px; }
	.rb-progress { padding: 12px; }
	.rb-nav__btn { padding: 12px 16px; font-size: 14px; }

	/* スマホ：横スクロールやめて 9 個全部を横並び（番号＋小さなラベル） */
	.rb-progress__steps {
		overflow-x: visible;
		justify-content: space-between;
		gap: 2px;
	}
	.rb-progress__step {
		min-width: 0;
		flex: 0 0 auto;
		padding: 4px 0;
		gap: 3px;
	}
	.rb-progress__num {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
	/* ラベルはスマホでも表示。極小フォントで詰める。 */
	.rb-progress__lbl {
		display: inline-block;
		font-size: 9px;
		line-height: 1.1;
		font-weight: 700;
		white-space: nowrap;
		color: var(--ink2);
	}
	.rb-progress__step.is-active .rb-progress__lbl { color: var(--accent); font-weight: 800; }
	.rb-progress__step.is-done   .rb-progress__lbl { color: #4caf50; }

	.rb-progress__counter {
		font-size: 13px;
		font-weight: 700;
		color: var(--ink);
		margin-top: 6px;
	}
}