/* スタイルガイドを組み立てる 画面まわり */

:root {
	--text: #111111;
	--bg: #ffffff;
	--bg-sub: #f6f6f4;
	--border: #dedede;
	--accent: #e8710a;
	--accent-dark: #c25c05;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg-sub);
	color: var(--text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--text); }
button { font: inherit; color: inherit; }

.sb-link { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---- 2カラム ---- */
.sb-layout {
	display: grid;
	grid-template-columns: minmax(400px, 480px) minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	align-items: start;
}

/* ---- 左 手順と選択 ---- */
.sb-steps {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	counter-reset: st;
}
.sb-steps button {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}
.sb-steps button:hover { border-color: var(--text); }
.sb-steps__no {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--text);
	font-weight: 700;
	font-size: 14px;
}
.sb-steps .is-done .sb-steps__no { background: var(--text); color: var(--bg); }
.sb-steps .is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }

.sb-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.sb-step-title { margin: 0 0 8px; font-size: 24px; line-height: 1.4; }
.sb-step-lead { margin: 0 0 24px; }

.sb-field { margin: 0 0 32px; }
.sb-field:last-child { margin-bottom: 0; }
.sb-field__label { display: block; margin: 0 0 8px; font-weight: 700; }
.sb-field__note { margin: 8px 0 0; font-size: 14px; }
.sb-input {
	width: 100%;
	font: inherit;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
}
.sb-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* 選択肢のカード */
.sb-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-opts--1 { grid-template-columns: 1fr; }
.sb-opt {
	display: block;
	width: 100%;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	text-align: left;
	cursor: pointer;
	position: relative;
}
.sb-opt:hover { border-color: var(--text); }
.sb-opt.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.sb-opt.is-on::after {
	content: "選択中";
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 0 8px;
	border-radius: 4px;
	background: var(--accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.sb-opt[disabled] { cursor: not-allowed; opacity: .5; }
.sb-opt__name { display: block; font-weight: 700; line-height: 1.5; padding-right: 64px; }
.sb-opt__desc { display: block; font-size: 14px; line-height: 1.6; margin-top: 4px; }
.sb-opt__prev { display: block; margin-top: 8px; border-radius: 4px; overflow: hidden; }

/* 色 */
.sb-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border);
	cursor: pointer;
	padding: 0;
	position: relative;
}
.sb-swatch.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.sb-swatch--auto { background: repeating-linear-gradient(45deg, #fff 0 4px, #ddd 4px 8px); }
.sb-colorrow { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.sb-colorrow input[type="color"] { width: 48px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); cursor: pointer; }
.sb-colorrow .sb-input { width: 136px; font-family: ui-monospace, Menlo, monospace; }
.sb-check { margin: 8px 0 0; font-size: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; max-width: 320px; }
.sb-check:empty { display: none; }
.sb-check b { padding: 0 8px; border-radius: 4px; border: 1px solid var(--text); }
.sb-check .is-ng { background: var(--text); color: var(--bg); }

/* 書き出し */
.sb-exports { display: grid; gap: 8px; }
.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 24px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: var(--accent);
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.sb-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.sb-btn--ghost { background: var(--bg); color: var(--text); border-color: var(--text); }
.sb-btn--ghost:hover { background: var(--bg-sub); border-color: var(--text); }
.sb-btn[hidden] { display: none; }
.sb-exports .sb-btn { justify-content: flex-start; }
.sb-exports small { display: block; font-weight: 400; font-size: 14px; }

.sb-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }

/* ---- 右 アートボード ---- */
.sb-preview {
	position: sticky;
	top: 24px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}
.sb-preview__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.sb-preview__label { margin: 0; font-size: 14px; font-weight: 700; }
.sb-preview__close { display: none; }
.sb-preview__tools { display: flex; gap: 16px; }
body.is-full #sb-full { display: none; }
.sb-preview__scroll { height: calc(100vh - 48px - 41px); overflow: auto; }

.is-flash { animation: sbFlash 1.2s ease-out; }
@keyframes sbFlash { 0% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 0 0 4px rgba(232, 113, 10, 0); } }

/* 大きく見る */
body.is-full .sb-side { display: none; }
body.is-full .sb-layout { grid-template-columns: 1fr; }
body.is-full .sb-preview__close { display: inline; }

.sb-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 50;
	transform: translate(-50%, 16px);
	background: var(--text);
	color: #ffffff;
	padding: 8px 24px;
	border-radius: 999px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.sb-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1023px) {
	.sb-layout { grid-template-columns: 1fr; }
	.sb-preview { position: static; }
	.sb-preview__scroll { height: 70vh; }
}
@media (max-width: 600px) {
	.sb-layout { padding: 16px; gap: 16px; }
	.sb-panel { padding: 16px; }
	.sb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-steps__label { display: none; }
	.sb-steps button { justify-content: center; }
	.sb-opts, .sb-opts--3 { grid-template-columns: 1fr; }
}

@media print {
	.sb-side, .sb-preview__bar, .sb-toast { display: none !important; }
	body { background: #fff; }
	.sb-layout { display: block; padding: 0; }
	.sb-preview { position: static; border: 0; }
	.sb-preview__scroll { height: auto; overflow: visible; }
}

.sb-opt__prev .sg { display: block; }

/* ---- 参考画像から作る ---- */
.sb-ai { padding: 16px; border: 2px solid var(--accent); border-radius: 8px; }
.sb-ai__lead { margin: 0 0 16px; }
.sb-ai__copy { width: 100%; margin-top: 8px; }
.sb-ai__result { display: grid; grid-template-columns: 120px 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); align-items: start; }
.sb-ai__result img { width: 100%; border-radius: 4px; border: 1px solid var(--border); }
.sb-ai__result p { margin: 0; }

.sb-ref-note { margin: -8px 0 24px; padding: 16px; border-radius: 8px; background: #fdf1e6; }
.sb-ref-note p { margin: 0; }
.sb-ref-note__label { font-size: 14px; font-weight: 700; margin-bottom: 4px !important; }

@media (max-width: 600px) {
	.sb-ai__result { grid-template-columns: 1fr; }
}