.study-section { margin: 42px 0; padding: 24px; background: #fffefa; border: 1px solid #e8ebde; border-radius: 16px; }
.study-section .section-title p:not(.eyebrow), .study-note { color: #788b7d; font-size: 13px; line-height: 1.5; margin-top: 8px; }
.study-section label { display: block; font-size: 12px; font-weight: 700; margin-top: 20px; }
.study-input { display: flex; gap: 10px; align-items: end; }
.study-input input { flex: 1; min-width: 0; border: 1px solid #dfe7db; border-radius: 8px; padding: 11px; color: #344a39; }
.study-list { display: grid; gap: 8px; margin-top: 16px; }
.study-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 12px; border: 1px solid #dfe8da; border-radius: 9px; background: #f5f7ef; color: #496149; }
.study-list button:disabled { cursor: default; opacity: .8; }
.choices button[aria-pressed="true"] { border-color: #789a6c; background: #e2efdc; box-shadow: 0 0 0 1px #789a6c; }
.choices button:disabled { opacity: .6; }
.primary:disabled { opacity: .55; cursor: not-allowed; }
.review-button { margin-top: 15px; padding: 11px 14px; border: 1px solid #789a6c; border-radius: 9px; background: #fffefa; color: #496149; font-size: 12px; font-weight: 700; }
.review-button:disabled { opacity: .55; cursor: wait; }
#typed-answer-area label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
#typed-answer { width: 100%; padding: 11px; border: 1px solid #dfe7db; border-radius: 8px; color: #344a39; }
.question-visual { margin: 16px 0; padding: 16px; border: 1px solid #dfe8da; border-radius: 12px; background: #f5f8f2; }
.question-visual figcaption { font-weight: 700; }
.question-visual p { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.visual-bars { display: grid; gap: 10px; margin-top: 14px; }
.visual-bar-row { display: grid; grid-template-columns: minmax(65px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: 12px; }
.visual-bar-track { display: block; height: 18px; background: #e6ede1; border-radius: 4px; }
.visual-bar-fill { display: block; height: 100%; background: #789a6c; border-radius: 4px; }
.visual-sequence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; list-style: none; }
.visual-sequence li { padding: 10px; border: 1px solid #bacfb4; border-radius: 8px; background: white; font-size: 13px; }
.visual-sequence li + li::before { content: '→ '; }
@media (max-width: 560px) { .study-input { flex-direction: column; align-items: stretch; } .study-input .primary { margin-top: 0; } }