/*
 * 暮らし整理メモのスタイル（テーマ非依存で成立するよう、
 * fsh-home のCSS変数があればそれを使い、無ければ同じ値へフォールバックする）。
 * 印刷: メモ生成後（body.fsh-memo-ready）だけフォーム等を隠してメモ本体を印刷する。
 * 生成前の印刷では何も隠さない（白紙になるのを防ぐ）。
 */

.fsh-memo {
	--memo-paper: var(--fsh-color-paper, #faf8f5);
	--memo-paper-soft: var(--fsh-color-paper-soft, #f2eee7);
	--memo-ink: var(--fsh-color-ink, #2b2a28);
	--memo-ink-soft: var(--fsh-color-ink-soft, #6f6a62);
	--memo-accent: var(--fsh-color-accent, #33594e);
	--memo-accent-strong: var(--fsh-color-accent-strong, #274a40);
	--memo-accent-soft: var(--fsh-color-accent-soft, #e9efec);
	--memo-line: var(--fsh-color-line, #e5e0d7);
	--memo-serif: var(--fsh-font-serif, 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', 'BIZ UDPMincho', serif);
	color: var(--memo-ink);
}

.fsh-memo-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 導入と注意書き */
.fsh-memo__lead {
	margin: 1rem 0 0;
	line-height: 2;
	color: var(--memo-ink-soft);
}

.fsh-memo__notice {
	margin-top: 1.75rem;
	padding: 1.25rem;
	border: 1px solid var(--memo-line);
	border-radius: 0.5rem;
	background: var(--memo-paper-soft);
}

.fsh-memo__notice-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--memo-ink-soft);
}

.fsh-memo__notice-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.fsh-memo__notice-dot {
	flex-shrink: 0;
	width: 0.25rem;
	height: 0.25rem;
	margin-top: 0.4rem;
	border-radius: 9999px;
	background: var(--memo-ink-soft);
}

.fsh-memo__noscript {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--memo-line);
	border-radius: 0.5rem;
	background: rgb(255 255 255 / 0.7);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--memo-ink-soft);
}

/* フォーム */
.fsh-memo__form {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 2.5rem;
}

.fsh-memo__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.fsh-memo__legend {
	padding: 0;
	font-family: var(--memo-serif);
	font-feature-settings: 'palt';
	letter-spacing: 0.04em;
	font-size: 1.125rem;
	font-weight: 700;
}

.fsh-memo__legend-no {
	margin-right: 0.5rem;
	font-size: 0.875rem;
	color: var(--memo-accent);
}

.fsh-memo__hint-text {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--memo-ink-soft);
}

.fsh-memo__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.fsh-memo-pill {
	display: inline-block;
}

/* 入力そのものは視覚的に隠し、ラベルの面（ピル）で状態を見せる */
.fsh-memo-pill__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fsh-memo-pill__face {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--memo-line);
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.7);
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.fsh-memo-pill__face:hover {
	border-color: rgb(51 89 78 / 0.5);
}

.fsh-memo-pill__input:checked + .fsh-memo-pill__face {
	border-color: var(--memo-accent);
	background: var(--memo-accent-soft);
	color: var(--memo-accent);
	font-weight: 500;
}

.fsh-memo-pill__input:focus-visible + .fsh-memo-pill__face {
	outline: 2px solid var(--memo-accent);
	outline-offset: 2px;
}

.fsh-memo__textarea {
	width: 100%;
	margin-top: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--memo-line);
	border-radius: 0.5rem;
	background: rgb(255 255 255 / 0.8);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.7;
	color: inherit;
	transition: border-color 0.2s;
}

.fsh-memo__textarea:focus {
	border-color: var(--memo-accent);
	outline: none;
}

/* ボタン */
.fsh-memo__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-top: 2rem;
	border-top: 1px solid var(--memo-line);
}

.fsh-memo-button {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 9999px;
	background: var(--memo-accent);
	color: var(--memo-paper);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.fsh-memo-button:hover {
	background: var(--memo-accent-strong);
}

.fsh-memo-button--outline {
	background: transparent;
	border-color: rgb(43 42 40 / 0.25);
	color: var(--memo-ink);
	font-weight: 500;
}

.fsh-memo-button--outline:hover {
	background: transparent;
	border-color: var(--memo-accent);
	color: var(--memo-accent);
}

.fsh-memo__empty-hint {
	width: 100%;
	margin: 0;
	font-size: 0.875rem;
	color: var(--memo-accent);
}

/* できあがったメモ */
.fsh-memo__result {
	margin-top: 3rem;
}

.fsh-memo__paper {
	padding: 1.5rem;
	border: 1px solid var(--memo-line);
	border-radius: 0.5rem;
	background: #ffffff;
	box-shadow: 0 1px 3px rgb(43 42 40 / 0.08);
}

.fsh-memo__paper-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1rem;
	row-gap: 0.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--memo-line);
}

.fsh-memo__paper-title {
	margin: 0;
	font-family: var(--memo-serif);
	font-feature-settings: 'palt';
	letter-spacing: 0.04em;
	font-size: 1.25rem;
	font-weight: 700;
}

.fsh-memo__paper-date {
	margin: 0;
	font-size: 0.75rem;
	color: var(--memo-ink-soft);
}

.fsh-memo__rows {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 1.25rem 0 0;
}

.fsh-memo__row {
	font-size: 0.875rem;
}

.fsh-memo__row-label {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--memo-ink-soft);
}

.fsh-memo__row-value {
	margin: 0.125rem 0 0;
	line-height: 1.7;
}

.fsh-memo__row-value--pre {
	white-space: pre-wrap;
}

.fsh-memo__guides {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--memo-line);
}

.fsh-memo__guide-label {
	margin: 0;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--memo-accent);
}

.fsh-memo__guide-items {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.fsh-memo__guide-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.7;
}

.fsh-memo__guide-item::before {
	content: none;
}

.fsh-memo__guide-dot {
	flex-shrink: 0;
	width: 0.25rem;
	height: 0.25rem;
	margin-top: 0.55rem;
	border-radius: 9999px;
	background: rgb(51 89 78 / 0.6);
}

.fsh-memo__entrance {
	font-size: 0.875rem;
	line-height: 1.7;
}

.fsh-memo__entrance-link {
	font-weight: 500;
	color: var(--memo-accent);
	text-decoration: none;
}

.fsh-memo__entrance-link:hover {
	text-decoration: underline;
}

.fsh-memo__paper-note {
	margin: 1.5rem 0 0;
	font-size: 11px;
	line-height: 1.8;
	color: var(--memo-ink-soft);
}

.fsh-memo__result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.fsh-memo__result-actions .fsh-memo-button {
	padding: 0.75rem 1.5rem;
}

.fsh-memo__status {
	font-size: 0.75rem;
	color: var(--memo-accent);
}

@media (min-width: 640px) {
	.fsh-memo__row {
		display: flex;
		align-items: baseline;
		gap: 1rem;
	}

	.fsh-memo__row-label {
		width: 10rem;
	}

	.fsh-memo__row-value {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.fsh-memo__paper {
		padding: 2rem;
	}
}

/*
 * 印刷。メモ生成後だけ、メモ本体以外を隠す。
 * ヘッダー・フッターは要素セレクタでも隠し、テーマ非依存で成立させる。
 */
@media print {
	body.fsh-memo-ready header,
	body.fsh-memo-ready footer,
	body.fsh-memo-ready nav,
	body.fsh-memo-ready .fsh-memo-chrome,
	body.fsh-memo-ready .fsh-memo__intro,
	body.fsh-memo-ready .fsh-memo__form,
	body.fsh-memo-ready .fsh-memo-no-print {
		display: none !important;
	}

	body.fsh-memo-ready .fsh-memo__result {
		margin: 0 !important;
	}

	body.fsh-memo-ready .fsh-memo__paper {
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
}