.purpose-unit { margin: 2.25rem 0; color: #102d49; }
.purpose-reference, .purpose-practice { margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid #c7e1ee; border-radius: 1.5rem; background: #fff; }
.purpose-heading { max-width: 50rem; }
.purpose-reference h2, .purpose-practice h2 { margin-top: .3rem; }
.purpose-figure { margin: 1.5rem 0; }
.purpose-figure img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border: 1px solid #d3e5ed; border-radius: 1rem; background: #fff; }
.purpose-figure figcaption { margin-top: .65rem; color: #557286; font-size: .92rem; line-height: 1.45; }
.purpose-context { margin-top: 1.5rem; }
.purpose-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.purpose-context-grid .purpose-figure { margin: 0; }
.purpose-pattern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.purpose-pattern-grid article { padding: 1.25rem; border: 1px solid #d5e9f1; border-radius: 1rem; background: #f8fcfe; }
.purpose-pattern-grid span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; color: #fff; background: #0c759e; font-weight: 800; }
.purpose-pattern-grid h3 { margin: .75rem 0; font-size: 1rem; }
.purpose-pattern-grid p { margin: .55rem 0; line-height: 1.5; }
.purpose-tip { padding: 1.1rem 1.25rem; border-left: .35rem solid #f2a741; border-radius: .65rem; background: #fff9ec; line-height: 1.55; }
.purpose-reference-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.purpose-table { overflow: hidden; border: 1px solid #d3e5ed; border-radius: .85rem; background: #fbfdff; }
.purpose-table h3 { margin: 0; padding: .9rem 1rem; background: #edf8fc; font-size: 1rem; }
.purpose-table-scroll { overflow-x: auto; }
.purpose-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.purpose-table th, .purpose-table td { padding: .6rem .75rem; border-top: 1px solid #dbeaf0; text-align: left; vertical-align: top; line-height: 1.4; }
.purpose-table th { color: #49687b; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.purpose-practice { background: #f7fcff; }
.purpose-activity { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #d5e9f1; border-radius: 1rem; background: #fff; }
.purpose-system-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0 1.25rem; }
.purpose-system-key span { padding: .6rem; border-radius: .55rem; color: #244a62; background: #edf8fc; font-size: .88rem; }
.purpose-system-key strong { display: inline-grid; place-items: center; min-width: 1.35rem; min-height: 1.35rem; margin-right: .25rem; border-radius: .3rem; color: #fff; background: #0a6489; }
.purpose-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.purpose-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purpose-function-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purpose-task { display: grid; gap: .65rem; padding: 1rem; border: 1px solid #d7e6ee; border-radius: .8rem; background: #fff; line-height: 1.45; transition: background .2s, border-color .2s; }
.purpose-task select { width: 100%; min-height: 2.8rem; padding: .55rem 2.25rem .55rem .75rem; border: 1px solid #90b9ce; border-radius: .65rem; color: #12324c; background: #f9fdff; font: inherit; font-weight: 700; }
.purpose-task.correct { border-color: #46af77; background: #edfbf2; }
.purpose-task.incorrect { border-color: #ebac58; background: #fff8eb; }
.purpose-score { color: #315d72; font-weight: 700; }
@media (max-width: 900px) { .purpose-pattern-grid, .purpose-reference-grid, .purpose-context-grid { grid-template-columns: 1fr; } .purpose-system-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .purpose-task-grid, .purpose-form-grid, .purpose-function-grid, .purpose-system-key { grid-template-columns: 1fr; } }