/* Contents page */
.elementary-contents{max-width:1180px;margin:0 auto;padding:36px 32px 48px}
.contents-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:30px}
.contents-kicker{margin:0 0 4px;color:#21795f;font-size:14px;font-weight:850}
.contents-head h1{margin:0;font-size:32px;line-height:1.3;color:#22314b}
.elementary-contents h2{font-size:20px;margin:0 0 14px;color:#22314b}
.elementary-contents section+section{margin-top:36px}
.unit-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.unit-card{display:flex;align-items:center;gap:16px;padding:22px 24px;background:#fff;border:1px solid #dce7f4;border-radius:20px;box-shadow:0 5px 18px #2b56830a;color:#22314b;text-decoration:none}
.unit-card:hover{border-color:#8fc4ad;box-shadow:0 6px 0 #d7ebe2}
.unit-number{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#e4f4ed;color:#21795f;font-weight:900}
.unit-copy{display:grid;gap:4px;min-width:0;flex:1}
.unit-copy strong{font-size:19px}
.unit-copy small{font-size:14px;color:#6b7c93;line-height:1.5}
.unit-state{flex:none;font-size:13px;font-weight:800;color:#21795f;background:#f0f8f4;border-radius:10px;padding:6px 10px}
.semester-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.semester-head h2:focus{outline:none}
#semester-count{font-size:14px;font-weight:750;color:#6b7c93}
.chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chapter-card{background:#fff;border:1px solid #dce7f4;border-radius:20px;padding:18px 14px 12px;box-shadow:0 5px 18px #2b56830a}
.chapter-card h3{display:flex;align-items:center;gap:9px;margin:0 6px 10px;font-size:16px}
.chapter-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:11px;background:#e9f3ff;font-size:20px}
.chapter-card:nth-child(3n+2) .chapter-icon{background:#fff3c8}
.chapter-card:nth-child(3n) .chapter-icon{background:#ffe5ec}
.chapter-card ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.chapter-card a{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:6px;align-items:center;padding:9px 8px;border-radius:12px;color:#3c4d66;font-size:14px;line-height:1.45;text-decoration:none}
.chapter-card a:hover{background:#f1f7ff}
.chapter-card a.done{color:#245f48}
.lesson-code{font-size:12px;color:#7b8ba1;font-weight:750}
.lesson-status{font-weight:900;color:#21795f}
.lesson-note{color:#71829b;font-size:13px;text-align:right;margin:22px 0 0}

/* Lesson view: the former expanded layout is now the default */
.elementary-lesson{position:fixed;inset:0;display:flex;flex-direction:column;background:#f1f7ff}
.elementary-lesson[hidden]{display:none}
.lesson-bar{flex:none;height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px 0 25px}
.lesson-actions{display:flex;gap:8px;flex:none}
.lesson-bar h1{margin:0;font-size:17px;font-weight:750;color:#22314b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elementary-lesson .game-stage{flex:1;min-height:0;width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#f1f7ff}
.elementary-lesson.responsive-course .game-stage iframe{position:static;width:100%;height:100%;transform:none;max-width:100%}
.elementary-lesson .lesson-note{position:fixed;right:22px;bottom:12px;margin:0;pointer-events:none}
.elementary-lesson .lesson-note:empty{display:none}

@media(max-width:900px){.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .elementary-contents{padding:22px 16px 36px}
 .contents-head h1{font-size:26px}
 .unit-cards,.chapter-grid{grid-template-columns:minmax(0,1fr)}
 .unit-card{padding:18px}
 .unit-card{flex-wrap:wrap}
 .unit-copy{flex-basis:calc(100% - 62px)}
 .unit-state{margin-left:62px}
 .lesson-bar{padding:0 12px 0 16px}
}