/* A teaching section inside the accepted card, never a new card layout. */
.morph-lesson { margin-block: 24px; }
.word-morphology.morph-lesson { padding: 30px 32px; background: #eef3e4; border: 1px solid #dce8c9; border-radius: 18px; }
.morph-overview .section-label { display: flex; align-items: center; gap: 10px; color: #758a79; font-size: 14px; }
.morph-overview h3 { font-size: 26px; font-weight: 600; margin: 18px 0 12px; }
.morph-lesson .morph-overview-meaning { font-size: 19px; color: #718472; line-height: 1.8; margin: 0 0 25px; }
.morph-overview .morph-lesson-parts { margin: 25px 0; gap: 14px; }
.morph-overview .morph-lesson-parts > span { min-width: 96px; max-width: 100%; box-sizing: border-box; padding: 17px 21px; gap: 7px; background: #f9fbf6; border-color: #dce8ce; border-radius: 13px; }
.morph-overview .morph-lesson-parts b { font-family: Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.25; overflow-x: auto; max-width: 100%; }
.morph-overview .morph-lesson-parts small { font-size: 14px; color: #738575; }
.morph-lesson .morph-overview-connection p { font-size: 19px; line-height: 1.9; color: #657d68; margin: 24px 0 0; max-width: 64ch; }
.morph-overview-connection h4 { margin: 0 0 5px; font-size: 14px; color: #708574; font-weight: 500; }
.morph-supplement { border-top: 1px solid #dce5d2; margin-top: 27px; padding-top: 16px; }
.morph-lesson .morph-detail-title { margin: 0; font-size: 15px; color: #718472; line-height: 1.8; }
.morph-lesson .morph-supplement .morph-lesson-step p { font-size: 16px; }
.morph-lesson h3 { margin: 10px 0 20px; line-height: 1.5; }
.morph-lesson .morph-lesson-step { margin-block: 18px; }
.morph-lesson .morph-lesson-step h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #365b4e; line-height: 1.5; }
.morph-lesson .morph-lesson-step p { margin: 0; font-size:18px; color:#34594b; line-height: 1.85; max-width: 64ch; }
.morph-reading-unit { overflow-wrap: normal; word-break: normal; hyphens: none; }
.morph-lesson-parts { display: flex; flex-wrap: wrap; gap: 10px; }
.morph-lesson-parts > span { display: grid; gap: 4px; padding: 10px 14px; border: 1px solid #dce3d4; border-radius: 10px; background: #fffaf2; }
.morph-lesson-parts b { white-space: nowrap; }
.morph-lesson-parts small { line-height: 1.6; }
.morph-related-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 10px; }
.morph-related-grid > div { min-width: 0; padding: 12px 14px; border: 1px solid #dce3d4; border-radius: 10px; background: rgba(255,255,255,.6); }
.morph-related-word { display: block; width: 100%; min-width: 0; font-size: 1.1em; line-height: 1.55; white-space: nowrap; word-break: normal; overflow-wrap: normal; hyphens: none; }
.morph-related-grid > div > span { display: block; margin-top: 4px; line-height: 1.65; }
.morph-related-content { margin-top: 5px; line-height: 1.65; }
.morph-related-sense + .morph-related-sense { margin-top: 9px; }
.morph-related-meaning { font-weight: 700; }
.morph-related-detail { display: block; margin-top: 5px; font-weight: 400; }
.morph-pos-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.morph-pos-chip { display: inline-block; padding: 1px 7px; border: 1px solid #bccbb5; border-radius: 5px; font-size: .75em; font-weight: 500; line-height: 1.7; color: #34594b; background: #f2f6eb; }
.morph-pos-noun { background: #edf3f6; border-color: #b9ccd4; color: #365a69; }
.morph-pos-verb { background: #edf3e4; border-color: #b5c7a8; color: #385d39; }
.morph-pos-adjective { background: #f6f0e1; border-color: #d5c59d; color: #765c2e; }
.morph-pos-adverb { background: #f1edf5; border-color: #c7bace; color: #665474; }
.morph-without-parts > .morph-supplement { border-top: 0; margin-top: 0; padding-top: 0; }
.morph-without-parts > .morph-supplement > .morph-lesson-step:first-child { margin-top: 0; }
.morph-sources { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 20px; font-size: .72em; }
.morph-sources a { text-underline-offset: 3px; }
.morph-recall { margin-top:24px; padding:18px; border:1px solid #b7c6a7; border-radius:12px; background:#fbfcf6; display:flex; align-items:center; gap:18px; }
.morph-recall h4 { margin:0 0 6px; color:#24493c; }
.morph-recall p { margin:0; line-height:1.7; font-size:.88em; }
.morph-recall button { min-height:44px; padding:10px 16px; border:1px solid #b7c6a7; border-radius:10px; background:#fff; color:#24493c; font:inherit; cursor:pointer; }
.morph-recall .morph-recall-start { flex-shrink:0; background:#24493c; color:#fff; }
.morph-recall-dialog { box-sizing:border-box; width:min(570px,calc(100% - 28px)); max-height:calc(100dvh - 32px); border:1px solid #b7c6a7; border-radius:18px; padding:28px; color:#24493c; background:#fcfcf7; overflow:auto; }
.morph-recall-dialog::backdrop { background:#20382f; }
.morph-recall-dialog h3 { font-size:1.3rem; padding-right:24px; }
.morph-recall-dialog p { margin:12px 0; font-size:1rem; line-height:1.75; }
.morph-recall-dialog .morph-recall-close { position:absolute; right:12px; top:10px; font-size:1.5rem; border:0; background:transparent; }
.morph-recall-dialog label { display:grid; gap:8px; margin-top:18px; }
.morph-recall-dialog input { box-sizing:border-box; width:100%; border:1px solid #a5b695; border-radius:8px; padding:12px; background:white; font-size:20px; color:#24493c; }
.morph-recall-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.morph-recall-actions button:disabled { opacity:.5; cursor:default; }
.morph-recall-feedback { padding:14px; background:#eaf0df; border-radius:10px; }
.morph-recall-feedback strong { white-space:nowrap; word-break:normal; font-size:clamp(.9rem,4vw,1.5rem); }
.morph-recall-dialog .morph-recall-footnote { font-size:.85rem; color:#5d6f63; }
.morph-recall-dialog .morph-recall-correct { font-weight:600; }
.morph-recall-dialog .morph-recall-retry { color:#80522b; }
@media(max-width:600px) { .morph-recall { display:block; padding:14px; } .morph-recall-start { margin-top:12px; } .morph-recall-dialog { padding:22px 18px; } }
@media(max-width:600px) {
 .word-morphology.morph-lesson { margin-block: 18px; padding: 22px 18px; }
 .morph-overview h3 { font-size: 23px; }
 .morph-lesson .morph-overview-meaning,.morph-lesson .morph-overview-connection p { font-size: 17px; }
 .morph-overview .morph-lesson-parts > span { padding: 14px 16px; min-width: 84px; }
 .morph-overview .morph-lesson-parts b { font-size: 27px; }
 .morph-lesson .morph-lesson-step { margin-block: 16px; }
 .morph-lesson .morph-lesson-step p { font-size:17px; line-height: 1.85; }
 .morph-related-grid { grid-template-columns: 1fr; }
}