/**
 * 一人親方 手取りシミュレーター - 専用スタイル
 */

:root {
	--hos-primary: #D4A017;
	--hos-primary-light: rgba(212, 160, 23, 0.08);
	--hos-primary-border: rgba(212, 160, 23, 0.3);
}

/* ===== 入力エリア ===== */
.hos-input-area { padding: 32px 20px; }
.hos-input-inner { max-width: 500px; margin: 0 auto; }
.hos-input-group { margin-bottom: 20px; }
.hos-label { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; }

.hos-select {
	width: 100%; padding: 10px 12px; font-family: inherit; font-size: 15px;
	color: var(--color-text); background: var(--color-white);
	border: 2px solid var(--color-border); border-radius: var(--radius);
	outline: none; transition: border-color 0.2s; cursor: pointer;
}
.hos-select:focus { border-color: var(--hos-primary); }

.hos-input-row { display: flex; align-items: center; gap: 8px; }

.hos-input {
	width: 100%; max-width: 180px; padding: 10px 12px; font-family: inherit; font-size: 18px;
	font-weight: 600; color: var(--color-text); text-align: right; background: var(--color-white);
	border: 2px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 0.2s;
	-moz-appearance: textfield;
}
.hos-input::-webkit-outer-spin-button, .hos-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hos-input:focus { border-color: var(--hos-primary); }

.hos-unit { font-size: 14px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }

/* レンジスライダー */
.hos-range {
	flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
	background: var(--color-border); border-radius: 3px; outline: none;
}
.hos-range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 22px; height: 22px;
	background: var(--hos-primary); border-radius: 50%; cursor: pointer; border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.hos-range::-moz-range-thumb {
	width: 22px; height: 22px; background: var(--hos-primary);
	border-radius: 50%; cursor: pointer; border: 2px solid #fff;
}

.hos-range-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--hos-primary); min-width: 36px; text-align: center; }

.hos-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }

/* 年齢選択 */
.hos-age-options { display: flex; gap: 8px; }
.hos-age-btn {
	flex: 1; padding: 10px; font-family: inherit; font-size: 14px; font-weight: 600;
	color: var(--color-text-muted); background: var(--color-bg); border: 2px solid var(--color-border);
	border-radius: var(--radius); cursor: pointer; transition: all 0.2s;
}
.hos-age-btn:hover { border-color: var(--hos-primary-border); }
.hos-age-btn.active { color: #B8860B; background: var(--hos-primary-light); border-color: var(--hos-primary); }

/* 計算ボタン */
.hos-calc-btn {
	display: block; width: 100%; padding: 14px; margin-top: 24px;
	font-family: inherit; font-size: 16px; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, #D4A017, #B8860B); border: none;
	border-radius: var(--radius); cursor: pointer; transition: all 0.2s;
}
.hos-calc-btn:hover { background: linear-gradient(135deg, #B8860B, #9A7209); }

.hos-input-note { margin-top: 10px; font-size: 13px; color: #C0392B; text-align: center; }

/* ===== 結果エリア ===== */
.hos-result-area { padding: 24px 20px; }
.hos-result-inner { max-width: 560px; margin: 0 auto; }

/* メイン結果（手取り額） */
.hos-result-main {
	text-align: center; padding: 24px 20px; margin-bottom: 20px;
	background: linear-gradient(135deg, rgba(212,160,23,0.06), rgba(184,134,11,0.03));
	border: 2px solid var(--hos-primary-border); border-radius: 12px;
	opacity: 0; transform: translateY(12px); animation: hosIn 0.5s ease forwards 0.1s;
}
@keyframes hosIn { to { opacity: 1; transform: translateY(0); } }

.hos-result-label { font-size: 14px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; }
.hos-result-amount { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #B8860B; }
.hos-result-amount-unit { font-size: 16px; font-weight: 600; }

/* 内訳テーブル */
.hos-breakdown {
	margin-bottom: 20px; opacity: 0; transform: translateY(12px);
	animation: hosIn 0.5s ease forwards 0.2s;
}

.hos-breakdown-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hos-breakdown-table th, .hos-breakdown-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.hos-breakdown-table th { text-align: left; font-weight: 600; color: var(--color-text); }
.hos-breakdown-table td { text-align: right; font-weight: 700; color: var(--color-text); font-family: var(--font-display); }

.hos-row-header { background: var(--color-bg); }
.hos-row-header th { font-size: 12px; color: var(--color-text-muted); }
.hos-row-total { border-top: 2px solid var(--color-text); }
.hos-row-total th, .hos-row-total td { font-size: 16px; padding: 12px; }
.hos-row-total td { color: #B8860B; }
.hos-row-sub td { color: var(--color-text-muted); font-size: 13px; }

/* 棒グラフ */
.hos-bar-chart {
	margin-bottom: 20px; padding: 16px; background: var(--color-bg); border-radius: 10px;
	opacity: 0; transform: translateY(12px); animation: hosIn 0.5s ease forwards 0.3s;
}
.hos-bar-title { font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 12px; text-align: center; }
.hos-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hos-bar-label { font-size: 11px; font-weight: 600; color: var(--color-text); width: 60px; text-align: right; flex-shrink: 0; }
.hos-bar-track { flex: 1; height: 20px; background: var(--color-white); border-radius: 4px; overflow: hidden; }
.hos-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; font-weight: 700; color: #fff; }
.hos-bar-fill--revenue { background: #3D7ABF; }
.hos-bar-fill--expense { background: #A0A0A0; }
.hos-bar-fill--insurance { background: #C08040; }
.hos-bar-fill--tax { background: #E04545; }
.hos-bar-fill--take { background: #2DA68E; }

/* 月額換算 */
.hos-monthly {
	text-align: center; padding: 14px 16px; background: rgba(45,166,142,0.06);
	border: 1px solid rgba(45,166,142,0.25); border-radius: 8px;
	opacity: 0; transform: translateY(12px); animation: hosIn 0.5s ease forwards 0.4s;
}
.hos-monthly-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.hos-monthly-amount { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #2DA68E; }
.hos-monthly-unit { font-size: 13px; }

.hos-recalc-btn { display: block; width: 100%; max-width: 300px; margin: 24px auto 0; }

/* CTA（コメントアウト状態で準備） */
/*
.hos-cta-area { margin-top: 20px; padding: 18px; background: rgba(212,160,23,0.06); border: 1px solid var(--hos-primary-border); border-radius: 10px; text-align: center; }
.hos-cta-text { font-size: 13px; color: var(--color-text); line-height: 1.7; margin-bottom: 12px; }
.hos-cta-button { display: inline-flex; padding: 10px 24px; font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #D4A017, #B8860B); border: none; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: all 0.2s; }
.hos-cta-button:hover { background: linear-gradient(135deg, #B8860B, #9A7209); color: #fff; }
*/

/* レスポンシブ */
@media (max-width: 480px) {
	.hos-result-amount { font-size: 30px; }
	.hos-breakdown-table { font-size: 13px; }
	.hos-breakdown-table th, .hos-breakdown-table td { padding: 8px; }
	.hos-bar-label { width: 50px; font-size: 10px; }
}
@media (max-width: 360px) {
	.hos-input-area, .hos-result-area { padding: 24px 16px; }
}