.grade-entry{max-width:1100px;margin:auto;padding:clamp(25px,5vw,65px) 22px;text-align:center}.grade-entry h1{font-size:clamp(36px,6vw,64px);margin:12px 0;color:#233959}.grade-intro{font-size:21px}.grade-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:35px 0}.grade-card{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#243c51;border:1px solid #d6e5d4;border-radius:30px;padding:25px 14px;background:linear-gradient(160deg,#f4ffe7,#fffef7);box-shadow:0 10px 0 #e4eadb;transition:transform .2s}.grade-card:hover{transform:translateY(-5px)}.grade-card:focus-visible{outline:4px solid #269384;outline-offset:5px}.grade-4{background:linear-gradient(160deg,#e3f5ff,#fffef7)}.grade-5{background:linear-gradient(160deg,#fff0d9,#fffef7)}.grade-6{background:linear-gradient(160deg,#eee7ff,#fffef7)}.grade-number{font-size:40px;font-weight:800}.grade-number small{font-size:18px;margin-left:5px}.grade-mascot{width:125px;height:125px;background-image:url('assets/collection-creatures.png');background-size:400% 300%;margin:12px 0}.grade-card h2{font-size:18px;margin:8px 0}.grade-card p{font-size:14px;line-height:1.6;min-height:45px}.grade-progress{font-size:13px;color:#526c70;margin:10px 0}.grade-go{background:#fff;border-radius:22px;padding:10px 18px}.grade-note{color:#607577;line-height:1.9;font-size:14px}.grade-switch{color:#285f59;font-size:14px;white-space:nowrap}.gate-progress{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-radius:16px;background:#fff7de;font-size:14px;margin:8px 0 14px}.gate-progress progress{width:110px;height:10px;accent-color:#e8aa46}.wz-jump[aria-disabled=true]{filter:saturate(.2);opacity:.72}.visual-cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:18px;background:#eef5ec;border-radius:18px}.visual-cards span{background:#fff;padding:14px;border-radius:12px;border:1px solid #d3dfcf;font-weight:700;max-width:100%;overflow-wrap:anywhere}.visual-bars{padding:18px;background:#eef5ec;border-radius:18px}.visual-bar{display:grid;grid-template-columns:80px 1fr 70px;align-items:center;gap:10px;margin:8px 0}.visual-bar i{height:22px;background:#5fab99;border-radius:4px;display:block}.visual-bar b{font-size:13px}@media(max-width:800px){.grade-cards{grid-template-columns:repeat(2,1fr)}.grade-card{padding:18px 10px}.grade-mascot{width:100px;height:100px}.grade-card h2{font-size:16px}.header-right{gap:6px}.grade-switch{font-size:12px}}@media(max-width:400px){.grade-cards{gap:10px}.grade-number{font-size:30px}.grade-number small{font-size:14px}.grade-card p{font-size:12px}.grade-go{font-size:13px;padding:9px 12px}}
@media(max-width:600px){.grade-entry{padding:20px 16px}.grade-entry h1{font-size:32px;margin:8px 0}.grade-intro{font-size:18px;margin:10px 0}.grade-cards{margin:20px 0;gap:14px}.grade-card{padding:12px 8px;border-radius:23px}.grade-number{font-size:28px}.grade-number small{font-size:14px}.grade-mascot{width:78px;height:78px;margin:5px 0}.grade-card h2{font-size:14px;margin:5px 0}.grade-card p{font-size:12px;margin:5px 0;min-height:36px}.grade-progress{margin:5px 0}.grade-go{font-size:13px;padding:8px 12px}.grade-note{font-size:12px}}
@media(max-width:600px){header{display:grid;grid-template-columns:1fr auto auto;width:100%;gap:6px 10px}header .brand{grid-column:1 / 3;white-space:nowrap}header .header-right{display:contents}header .grade-switch{grid-column:3;font-size:12px}header .level-badge{justify-self:start}header .record-button{font-size:13px;padding:8px}header .text-button{font-size:12px}}
.parts-visual{padding:20px;background:#fff8e6;border-radius:16px;text-align:center}.parts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:300px;margin:0 auto 10px}.parts-grid span{height:50px;background:#fff;border:2px solid #7daa98;border-radius:7px}.parts-grid .marked{background:#71bea6}.parts-visual figcaption{font-size:14px;color:#47675d}
@media(min-width:801px){.puzzle-panel:has(>:is(.visual-cards,.visual-bars,.parts-visual,.visual-diagram)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 20px;align-items:start}.puzzle-panel:has(>:is(.visual-cards,.visual-bars,.parts-visual,.visual-diagram))>:is(.step-nav,.step-label,.task-title,.task-desc,.feedback,.hint-body,.actionbar){grid-column:1/-1}.puzzle-panel>:is(.visual-cards,.visual-bars,.parts-visual,.visual-diagram){grid-column:1;grid-row:5;margin:0}.puzzle-panel:has(>:is(.visual-cards,.visual-bars,.parts-visual,.visual-diagram))>:is(.answer-fields,.choices,.order-work){grid-column:2;grid-row:5}.visual-cards{align-content:start}.visual-cards span{font-size:16px}.puzzle-panel:has(>.visual-cards) .choices{margin-top:0}}
.visual-diagram{min-width:0;background:#f3f8ed;border:1px solid #d7e3cc;border-radius:18px;padding:12px}.visual-diagram .puzzle-diagram{margin:0}.visual-diagram svg{display:block;width:100%;height:auto;max-height:250px}.visual-diagram svg text{font:14px Pretendard,sans-serif;fill:#284c49;stroke:none}.visual-diagram svg path,.visual-diagram svg circle,.visual-diagram svg rect,.visual-diagram svg polygon{stroke:#478a7c;stroke-width:2;fill:#fffdf2}.visual-diagram svg path{fill:none}.visual-diagram svg .dashed{stroke-dasharray:5 4}.visual-diagram svg .closed-road{stroke:#b75a59;stroke-dasharray:5 5}.visual-diagram svg .hole{fill:#fff;stroke:#d56d49}.visual-diagram svg .start-dot{fill:#3d78ba}.visual-diagram figcaption{font-size:14px;line-height:1.6;text-align:center;margin-top:5px}.visual-diagram details{font-size:14px;line-height:1.7;margin-top:10px}.visual-diagram summary{cursor:pointer;color:#285f59;padding:6px}.visual-diagram li{margin:5px 0}.visual-diagram ul{padding-left:22px;margin:6px 0}.visual-diagram summary:focus-visible{outline:3px solid #408b7d;border-radius:4px}
.friend-detail .spirit.large{--size:220px;filter:drop-shadow(0 5px 5px #22364b30)}.friend-detail{background:radial-gradient(ellipse at 50% 100px,#e5edf5 0,transparent 180px)}@media(max-width:600px){.friend-detail .spirit.large{--size:190px}}