/* =============================================================
 * Solar Simulator フロントCSS
 *
 * 設計方針:
 *   - PC・タブレット・スマホ問わず1カラム（入力→結果の縦並び）
 *   - BEM風命名（solar-sim__〜）でテーマCSSと衝突しにくく
 *   - 見出しはdivで実装（hタグ未使用＝テーマと干渉しない）
 *   - CSS変数で配色を一元管理
 *   - 数字が苦手な人でも視認しやすい大きめの要素
 *   - サマリー値はnowrap＋keep-allで縦折り返し抑制
 * ============================================================= */

/* ---------------- ベース / 配色 -------------------------------- */
.solar-sim{
	--ss-bg:           #f3f6fb;
	--ss-card:         #ffffff;
	--ss-text:         #1f2937;
	--ss-text-mute:    #6b7280;
	--ss-line:         #e5e7eb;
	--ss-line-strong:  #cbd5e1;
	--ss-primary:      #1f4ea3;
	--ss-primary-soft: #e8eef9;
	--ss-accent:       #f5b400;
	--ss-good:         #1f9d55;
	--ss-good-soft:    #dcfce7;
	--ss-warn:         #f59e0b;
	--ss-warn-soft:    #fef3c7;
	--ss-bad:          #dc2626;
	--ss-bad-soft:     #fee2e2;
	--ss-blue-soft:    #dbeafe;
	--ss-orange:       #f97316;
	--ss-orange-soft:  #fff1e6;
	--ss-green:        #16a34a;
	--ss-green-soft:   #dcfce7;
	--ss-yellow:       #eab308;
	--ss-yellow-soft:  #fef9c3;
	--ss-radius:       14px;
	--ss-radius-sm:    10px;
	--ss-shadow:       0 6px 18px rgba(31, 41, 55, 0.06);

	/* 1カラム固定（PC・タブレット・スマホ共通） */
	display:flex;
	flex-direction:column;
	gap:16px;

	color:var(--ss-text);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
	font-size:15px;
	line-height:1.55;
	background:var(--ss-bg);
	padding:16px;
	border-radius:18px;
	box-sizing:border-box;
	max-width:100%;
}
.solar-sim *,
.solar-sim *::before,
.solar-sim *::after{
	box-sizing:border-box;
}
/* テーマのmargin相続を打ち消す */
.solar-sim p,
.solar-sim ul,
.solar-sim dl,
.solar-sim dd{
	margin:0;
}
.solar-sim ul{
	padding:0;
	list-style:none;
}

/* ---------------- カラム / カード ------------------------------ */
.solar-sim__col{
	background:var(--ss-card);
	border-radius:var(--ss-radius);
	padding:20px;
	box-shadow:var(--ss-shadow);
	display:flex;
	flex-direction:column;
	gap:20px;
	min-width:0;
	width:100%;
}

/* ---------------- ヘッダー ------------------------------------- */
.solar-sim__header{
	display:flex;
	align-items:center;
	gap:12px;
	padding-bottom:14px;
	border-bottom:1px solid var(--ss-line);
	flex-wrap:wrap;
}
.solar-sim__header-icon{
	width:24px;
	height:24px;
	color:var(--ss-primary);
	flex-shrink:0;
}
.solar-sim__header-body{
	min-width:0;
	flex:1;
}
.solar-sim__header-title{
	font-size:18px;
	font-weight:700;
	color:var(--ss-text);
	line-height:1.3;
}
.solar-sim__header-sub{
	margin-top:2px;
	font-size:12px;
	color:var(--ss-text-mute);
}
.solar-sim__header-tag{
	font-size:12px;
	font-weight:500;
	color:var(--ss-text-mute);
	margin-left:4px;
}
.solar-sim__meta-toggle{
	margin-left:auto;
	background:transparent;
	border:none;
	color:var(--ss-text-mute);
	font-size:12px;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:6px 10px;
	border-radius:6px;
	font-family:inherit;
}
.solar-sim__meta-toggle:hover{
	background:var(--ss-primary-soft);
	color:var(--ss-primary);
}
.solar-sim__meta-toggle svg{
	width:14px;
	height:14px;
	transition:transform .2s;
}
.solar-sim__meta-toggle[aria-expanded="false"] svg{
	transform:rotate(-90deg);
}

/* ---------------- フィールドレイアウト ------------------------- */
.solar-sim__field{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.solar-sim__label{
	font-size:13px;
	font-weight:600;
	color:var(--ss-text);
	display:flex;
	gap:6px;
	align-items:baseline;
	flex-wrap:wrap;
}
.solar-sim__label--sub{
	font-size:12px;
	color:var(--ss-text-mute);
	font-weight:500;
}
.solar-sim__label-note{
	font-size:11px;
	font-weight:400;
	color:var(--ss-text-mute);
}
.solar-sim__grid{
	display:grid;
	gap:20px;
}
.solar-sim__grid--two{
	grid-template-columns:1fr;
}
@media (min-width:600px){
	.solar-sim__grid--two{
		grid-template-columns:1fr 1fr;
	}
}

/* ---------------- セレクト ------------------------------------- */
.solar-sim__select-wrap{
	position:relative;
}
.solar-sim__select-wrap::after{
	content:"";
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-70%) rotate(45deg);
	width:8px;
	height:8px;
	border-right:2px solid var(--ss-text-mute);
	border-bottom:2px solid var(--ss-text-mute);
	pointer-events:none;
}
.solar-sim__select-wrap select{
	width:100%;
	padding:14px 36px 14px 14px;
	border-radius:var(--ss-radius-sm);
	border:1px solid var(--ss-line-strong);
	background:#fff;
	font-size:16px;
	color:var(--ss-text);
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	cursor:pointer;
	font-family:inherit;
	line-height:1.2;
}
.solar-sim__select-wrap select:focus{
	outline:2px solid var(--ss-primary);
	outline-offset:1px;
}

/* ---------------- 値表示行 ------------------------------------- */
.solar-sim__value-row{
	display:flex;
	align-items:baseline;
	gap:6px;
	flex-wrap:wrap;
}
.solar-sim__value{
	font-size:28px;
	font-weight:700;
	color:var(--ss-text);
	line-height:1.1;
	font-variant-numeric:tabular-nums;
}
.solar-sim__unit{
	font-size:14px;
	font-weight:600;
	color:var(--ss-text-mute);
}
.solar-sim__chip{
	margin-left:auto;
	font-size:11px;
	padding:4px 10px;
	border-radius:999px;
	white-space:nowrap;
	line-height:1.4;
}
.solar-sim__chip--blue{
	background:var(--ss-blue-soft);
	color:var(--ss-primary);
}

/* ---------------- スライダー（黄色つまみ） --------------------- */
.solar-sim__slider{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	height:8px;
	background:#e8edf4;
	border-radius:999px;
	outline:none;
	margin:6px 0 2px;
	background-image:linear-gradient(var(--ss-accent), var(--ss-accent));
	background-repeat:no-repeat;
	background-size:50% 100%;
	cursor:pointer;
}
.solar-sim__slider::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--ss-accent);
	border:4px solid #fff;
	box-shadow:0 2px 8px rgba(0,0,0,.18);
	cursor:pointer;
	transition:transform .1s;
}
.solar-sim__slider::-webkit-slider-thumb:hover{
	transform:scale(1.05);
}
.solar-sim__slider::-moz-range-thumb{
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--ss-accent);
	border:4px solid #fff;
	box-shadow:0 2px 8px rgba(0,0,0,.18);
	cursor:pointer;
}
.solar-sim__range-labels{
	display:flex;
	justify-content:space-between;
	font-size:11px;
	color:var(--ss-text-mute);
}

/* ---------------- 屋根方向ボタン -------------------------------- */
.solar-sim__directions{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:8px;
}
@media (min-width:600px){
	.solar-sim__directions{
		grid-template-columns:repeat(6, 1fr);
	}
}
.solar-sim__dir{
	background:#fff;
	border:1px solid var(--ss-line-strong);
	border-radius:var(--ss-radius-sm);
	padding:14px 6px 10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	cursor:pointer;
	color:var(--ss-text);
	transition:all .15s;
	min-height:74px;
	font-family:inherit;
}
.solar-sim__dir svg{
	width:22px;
	height:22px;
	color:var(--ss-text-mute);
}
.solar-sim__dir-label{
	font-size:13px;
	font-weight:600;
}
.solar-sim__dir:hover{
	border-color:var(--ss-primary);
}
.solar-sim__dir.is-active{
	background:var(--ss-primary);
	color:#fff;
	border-color:var(--ss-primary);
}
.solar-sim__dir.is-active svg{
	color:#fff;
}

/* ---------------- 世帯条件トグルカード -------------------------- */
.solar-sim__toggles{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:10px;
}
@media (min-width:600px){
	.solar-sim__toggles{
		grid-template-columns:repeat(4, 1fr);
	}
}
.solar-sim__toggle{
	background:#fff;
	border:1px solid var(--ss-line-strong);
	border-radius:var(--ss-radius-sm);
	padding:14px 12px;
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:flex-start;
	min-height:130px;
	transition:border-color .15s, background .15s;
}
.solar-sim__toggle.is-on{
	border-color:var(--ss-primary);
	background:linear-gradient(180deg, #fff, var(--ss-primary-soft));
}
.solar-sim__toggle-icon{
	width:34px;
	height:34px;
	border-radius:10px;
	background:var(--ss-primary-soft);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--ss-primary);
	flex-shrink:0;
}
.solar-sim__toggle-icon svg{
	width:18px;
	height:18px;
}
.solar-sim__toggle-label{
	font-size:13px;
	font-weight:600;
	line-height:1.2;
}
.solar-sim__switch{
	margin-top:auto;
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:transparent;
	border:none;
	cursor:pointer;
	padding:0;
	position:relative;
	font-family:inherit;
}
.solar-sim__switch-track{
	width:46px;
	height:24px;
	background:#cbd5e1;
	border-radius:999px;
	position:relative;
	transition:background .2s;
	display:inline-block;
	flex-shrink:0;
}
.solar-sim__switch-knob{
	width:18px;
	height:18px;
	background:#fff;
	border-radius:50%;
	position:absolute;
	top:3px;
	left:3px;
	transition:left .2s;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.solar-sim__switch-label{
	font-size:11px;
	font-weight:700;
	color:var(--ss-text-mute);
	min-width:24px;
}
.solar-sim__switch[aria-checked="true"] .solar-sim__switch-track{
	background:var(--ss-primary);
}
.solar-sim__switch[aria-checked="true"] .solar-sim__switch-knob{
	left:25px;
}
.solar-sim__switch[aria-checked="true"] .solar-sim__switch-label{
	color:var(--ss-primary);
}

.solar-sim__conditional{
	margin-top:12px;
	padding:14px;
	background:var(--ss-bg);
	border-radius:var(--ss-radius-sm);
	display:flex;
	flex-direction:column;
	gap:8px;
}
.solar-sim__conditional[hidden]{
	display:none !important;
}

/* ---------------- CTA / 注釈 ----------------------------------- */
.solar-sim__cta{
	background:var(--ss-primary);
	color:#fff;
	border:none;
	border-radius:var(--ss-radius-sm);
	padding:16px;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	transition:background .15s;
	font-family:inherit;
}
.solar-sim__cta:hover{
	background:#173d80;
}
.solar-sim__cta svg{
	width:18px;
	height:18px;
}
.solar-sim__note{
	font-size:11px;
	color:var(--ss-text-mute);
	text-align:left;
	line-height:1.5;
}

/* ---------------- 結果: サマリーカード ------------------------- */
.solar-sim__summary{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
}
@media (min-width:780px){
	.solar-sim__summary{
		grid-template-columns:repeat(4, minmax(0, 1fr));
	}
}
.solar-sim__summary-card{
	background:#fff;
	border:1px solid var(--ss-line);
	border-radius:var(--ss-radius-sm);
	padding:16px 14px;
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0;
}
.solar-sim__summary-title{
	font-size:12px;
	color:var(--ss-text-mute);
	font-weight:600;
	line-height:1.4;
	word-break:keep-all;
	overflow-wrap:break-word;
}
.solar-sim__summary-icon{
	width:36px;
	height:36px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-bottom:4px;
	flex-shrink:0;
}
.solar-sim__summary-icon svg{
	width:18px;
	height:18px;
}
.solar-sim__summary-icon--orange{ background:var(--ss-orange-soft); color:var(--ss-orange); }
.solar-sim__summary-icon--green{  background:var(--ss-green-soft);  color:var(--ss-green); }
.solar-sim__summary-icon--yellow{ background:var(--ss-yellow-soft); color:var(--ss-yellow); }
.solar-sim__summary-icon--blue{   background:var(--ss-blue-soft);   color:var(--ss-primary); }
.solar-sim__summary-value{
	font-weight:800;
	color:var(--ss-text);
	line-height:1.1;
	display:flex;
	align-items:baseline;
	gap:2px;
	/* 数値の縦折り返しを抑制 */
	white-space:nowrap;
	word-break:keep-all;
	overflow:hidden;
	min-width:0;
}
.solar-sim__summary-num{
	font-size:26px;
	letter-spacing:-0.02em;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
.solar-sim__summary-unit{
	font-size:13px;
	font-weight:600;
	color:var(--ss-text-mute);
	margin-left:2px;
	white-space:nowrap;
}
.solar-sim__summary-status{
	display:inline-block;
	font-size:11px;
	font-weight:700;
	padding:3px 10px;
	border-radius:999px;
	width:fit-content;
	margin-top:4px;
	line-height:1.4;
	white-space:nowrap;
}
.solar-sim__summary-status.is-good{ background:var(--ss-good-soft); color:var(--ss-good); }
.solar-sim__summary-status.is-normal{ background:var(--ss-blue-soft); color:var(--ss-primary); }
.solar-sim__summary-status.is-warn{ background:var(--ss-warn-soft); color:var(--ss-warn); }
.solar-sim__summary-status.is-bad{ background:var(--ss-bad-soft); color:var(--ss-bad); }
.solar-sim__summary-note{
	font-size:11px;
	color:var(--ss-text-mute);
	margin-top:auto;
	padding-top:4px;
	line-height:1.5;
}

/* 数値サイズはコンテナ幅にあわせて段階調整（はみ出し防止） */
@media (min-width:600px) and (max-width:779px){
	.solar-sim__summary-num{ font-size:28px; }
}
@media (min-width:780px) and (max-width:1023px){
	.solar-sim__summary-num{ font-size:22px; }
}
@media (min-width:1024px){
	.solar-sim__summary-num{ font-size:26px; }
}

/* ---------------- 結果: チャート -------------------------------- */
.solar-sim__chart-card{
	background:#fff;
	border:1px solid var(--ss-line);
	border-radius:var(--ss-radius-sm);
	padding:16px;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.solar-sim__chart-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.solar-sim__chart-title{
	font-size:15px;
	font-weight:700;
	color:var(--ss-text);
}
.solar-sim__chart-tabs{
	display:inline-flex;
	background:var(--ss-bg);
	border-radius:999px;
	padding:3px;
}
.solar-sim__chart-tabs button{
	background:transparent;
	border:none;
	font-size:12px;
	padding:6px 12px;
	border-radius:999px;
	cursor:pointer;
	color:var(--ss-text-mute);
	font-weight:600;
	font-family:inherit;
}
.solar-sim__chart-tabs button.is-active{
	background:#fff;
	color:var(--ss-primary);
	box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.solar-sim__chart-wrap{
	position:relative;
	width:100%;
	height:280px;
}
@media (min-width:720px){
	.solar-sim__chart-wrap{ height:320px; }
}
.solar-sim__meta{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	padding-top:12px;
	border-top:1px dashed var(--ss-line);
	font-size:12px;
}
@media (min-width:600px){
	.solar-sim__meta{ grid-template-columns:repeat(3, 1fr); }
}
.solar-sim__meta-item{
	display:flex;
	gap:8px;
	align-items:baseline;
	min-width:0;
}
.solar-sim__meta dt{
	color:var(--ss-text-mute);
	background:var(--ss-bg);
	padding:2px 8px;
	border-radius:4px;
	flex-shrink:0;
}
.solar-sim__meta dd{
	color:var(--ss-text);
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
}

/* ---------------- 結果: 診断 + 推奨 ---------------------------- */
.solar-sim__bottom{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
}
@media (min-width:720px){
	.solar-sim__bottom{ grid-template-columns:2fr 1fr; }
}
.solar-sim__comments-card,
.solar-sim__recommend-card{
	background:#fff;
	border:1px solid var(--ss-line);
	border-radius:var(--ss-radius-sm);
	padding:16px 18px;
}
.solar-sim__card-title{
	font-size:14px;
	font-weight:700;
	color:var(--ss-text);
	margin-bottom:12px;
}
.solar-sim__comments{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.solar-sim__comments li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:13px;
	color:var(--ss-text);
	line-height:1.6;
}
.solar-sim__comments li::before{
	content:"";
	flex-shrink:0;
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--ss-good) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
	margin-top:1px;
}
.solar-sim__comments li.is-warn::before{
	background:var(--ss-warn) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") center/12px no-repeat;
}
.solar-sim__comments li.is-normal::before,
.solar-sim__comments li.is-info::before{
	background:var(--ss-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/12px no-repeat;
}

.solar-sim__recommend-card{
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
}
.solar-sim__recommend-card .solar-sim__card-title{
	align-self:flex-start;
	margin-bottom:0;
}
.solar-sim__stars{
	display:flex;
	gap:4px;
	font-size:28px;
	color:#e5e7eb;
	line-height:1;
}
.solar-sim__stars .is-on{
	color:var(--ss-yellow);
}
.solar-sim__recommend-label{
	font-size:16px;
	font-weight:700;
	color:var(--ss-text);
}
.solar-sim__recommend-note{
	font-size:11px;
	color:var(--ss-text-mute);
	line-height:1.5;
}

/* ---------------- WPテーマ干渉対策（共通） --------------------- */
.solar-sim button{
	font-family:inherit;
}
.solar-sim select,
.solar-sim input,
.solar-sim button,
.solar-sim textarea{
	font-family:inherit;
}
/* テーマがbuttonに余白を付けている場合に備えて */
.solar-sim button:focus{
	outline:2px solid var(--ss-primary);
	outline-offset:1px;
}
.solar-sim button:focus:not(:focus-visible){
	outline:none;
}