/* 性格タイプ×生年月日アニマル診断（ts.css の変数を利用） */
.ts-quiz { max-width: 760px; margin: 0 auto; color: var(--ts-ink); overflow-wrap: anywhere; }
.ts-quiz * { box-sizing: border-box; }
.ts-quiz__notice { background: var(--ts-warn-bg); border-left: 4px solid var(--ts-warn-line); border-radius: var(--ts-radius-sm); padding: 8px 14px; margin: 0 0 1.4em; font-size: .78rem; color: var(--ts-muted); line-height: 1.6; }
.ts-quiz__notes { margin: 0; padding-left: 1.2em; }
.ts-quiz__step { background: var(--ts-bg-soft); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 16px; margin: 0 0 16px; }
.ts-quiz__h { font-size: 1.1rem; margin: 0 0 12px; }
.ts-quiz__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ts-quiz__type { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 2px solid var(--ts-line); border-radius: var(--ts-radius-sm); background: #fff; color: var(--ts-ink); font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; min-width: 0; }
.ts-quiz__type b { font-size: 1rem; letter-spacing: .05em; color: var(--ts-primary-dark); }
.ts-quiz__type span { font-size: .75rem; color: var(--ts-muted); line-height: 1.4; }
.ts-quiz__type:hover { border-color: var(--ts-primary); transform: translateY(-2px); }
.ts-quiz__type.is-on { border-color: var(--ts-primary); background: var(--ts-primary-soft); box-shadow: var(--ts-shadow); }
.ts-quiz__mini { margin-top: 14px; background: #fff; border: 1px dashed var(--ts-line); border-radius: var(--ts-radius-sm); padding: 10px 14px; }
.ts-quiz__mini summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.ts-quiz__q { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.ts-quiz__q legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: 4px; }
.ts-quiz__q label { display: block; padding: 4px 0; font-size: .9rem; }
.ts-quiz__qmsg { font-size: .85rem; color: var(--ts-ok-line); }
.ts-quiz__date { display: flex; flex-wrap: wrap; gap: 12px; }
.ts-quiz__date label { font-weight: 700; font-size: .9rem; }
.ts-quiz__date select { margin-left: 4px; padding: .5em .6em; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); background: #fff; font-family: inherit; font-size: 1rem; max-width: 100%; }
.ts-quiz__go { text-align: center; margin: 0 0 20px; }
.ts-quiz__err { color: var(--ts-danger); font-size: .9rem; min-height: 1.4em; margin: 8px 0 0; }
.ts-quiz__result { outline: none; }
.ts-quiz__card { --q: var(--ts-primary); text-align: center; border-radius: var(--ts-radius); padding: 24px 16px; margin: 0 0 20px; border: 3px solid var(--q); background: #fff; box-shadow: var(--ts-shadow); animation: tsq-pop .5s ease-out both; }
.ts-quiz__card--spring { --q: #f06292; background: #fff0f5; }
.ts-quiz__card--summer { --q: #0ea5e9; background: #eaf6fd; }
.ts-quiz__card--autumn { --q: #e07a1f; background: #fff3e6; }
.ts-quiz__card--winter { --q: #6366f1; background: #eef0ff; }
.ts-quiz__emoji { font-size: 4.5rem; line-height: 1.1; animation: tsq-bob 2.4s ease-in-out infinite; }
.ts-quiz__code { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--q); }
.ts-quiz__title { margin: 6px 0 8px; font-size: 1.4rem; line-height: 1.4; }
.ts-quiz__catch { margin: 0; font-weight: 700; }
.ts-quiz__catch--sub { margin-top: 6px; font-weight: 400; font-size: .9rem; color: var(--ts-muted); }
.ts-quiz__draft { border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 16px; background: #fff; margin: 0 0 16px; }
.ts-quiz__draft-title { margin: 0 0 8px; font-size: 1.1rem; }
.ts-quiz__sec h4 { margin: 14px 0 4px; font-size: .95rem; color: var(--ts-primary-dark); }
.ts-quiz__sec p { margin: 0; line-height: 1.8; font-size: .95rem; }
.ts-quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ts-quiz__msg { text-align: center; font-size: .85rem; color: var(--ts-muted); min-height: 1.4em; margin: 8px 0; }
.ts-quiz__notice--end { margin-top: 12px; }
@keyframes tsq-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tsq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 480px) {
	.ts-quiz__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ts-quiz__actions .ts-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ts-quiz__card, .ts-quiz__emoji { animation: none; }
	.ts-quiz__type { transition: none; }
	.ts-quiz__type:hover { transform: none; }
}