/* =========================================================
   스타일 — 아늑한 파스텔 숲 RPG
   ========================================================= */
:root{
  --sage:#8fae7e; --sage-dark:#5c7d52; --leaf:#dce8b0; --leaf-2:#eef4d6;
  --beige:#f2e2c0; --beige-2:#f8efdc; --brown:#8a6a4c; --brown-dark:#5b4431;
  --teal:#5aa6a0; --teal-dark:#3c7f79; --ink:#3b382c; --muted:#7c7666;
  --gray:#c9c5bb; --gray-ink:#8f8b82; --danger:#c0604f; --warn:#d9a441;
  --font-title:'Jua', 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body:'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --top-h:58px; --bottom-h:46px; --panel-w:310px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--beige);color:var(--ink);font-family:var(--font-body);font-size:17px;-webkit-tap-highlight-color:transparent}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,.stage-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
h1,h2,h3{font-family:var(--font-title);font-weight:400;margin:0}
.hidden{display:none!important}
#app{position:relative;height:100%;width:100%}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* 공통 버튼 — 픽셀 RPG 패널처럼 단단한 테두리와 아래쪽 그림자 */
.btn{min-height:46px;padding:8px 16px;border:2px solid var(--brown-dark);border-radius:10px;background:var(--beige-2);box-shadow:0 3px 0 var(--brown-dark);font-family:var(--font-title);font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .05s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown-dark)}
.btn.primary{background:var(--sage);color:#fff;border-color:var(--sage-dark);box-shadow:0 3px 0 #3f5a38}
.btn.teal{background:var(--teal);color:#fff;border-color:var(--teal-dark);box-shadow:0 3px 0 #2c5f5a}
.btn.danger{background:#f3d5cc;border-color:var(--danger);color:#7a2f22;box-shadow:0 3px 0 var(--danger)}
.btn.small{min-height:38px;font-size:16px;padding:4px 12px}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;font-family:var(--font-body);font-size:15px;color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.icon-btn{width:46px;height:46px;padding:0;font-size:22px}

/* 로딩·로그인 */
.center-wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;
  background:
   radial-gradient(circle at 15% 85%, #cfe0a6 0 120px, transparent 121px),
   radial-gradient(circle at 88% 12%, #e4ecc0 0 90px, transparent 91px),
   var(--beige)}
.game-title{font-family:var(--font-title);font-size:clamp(44px,8vw,84px);color:var(--sage-dark);letter-spacing:2px;text-shadow:3px 3px 0 var(--leaf),5px 5px 0 rgba(91,68,49,.25);line-height:1.05}
.game-sub{font-size:20px;color:var(--brown)}
.login-actions{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:10px}
.login-actions .btn.primary{font-size:24px;min-height:62px;padding:10px 40px}
.spinner{width:42px;height:42px;border:5px solid var(--leaf);border-top-color:var(--sage-dark);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* 홈 */
#screen-home{overflow:auto;background:var(--beige)}
.home-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 28px 0;flex-wrap:wrap}
.home-head .game-title{font-size:clamp(34px,5vw,54px);text-align:left}
.player-badge{display:flex;align-items:center;gap:10px;background:var(--beige-2);border:2px solid var(--brown);border-radius:12px;padding:6px 8px 6px 14px}
.player-badge .name{font-family:var(--font-title);font-size:20px}
.player-badge .code{font-size:13px;color:var(--muted)}
.home-notice{margin:14px 28px 0;padding:12px 16px;border-radius:10px;background:#fff3cf;border:2px dashed var(--warn);font-size:16px}
.stage-trail{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:22px 28px 30px;max-width:1200px}
.stage-card{position:relative;text-align:left;border:3px solid var(--sage-dark);border-radius:16px;padding:16px 18px 18px;background:var(--leaf-2);box-shadow:0 5px 0 var(--sage-dark);min-height:150px;display:flex;flex-direction:column;gap:6px}
.stage-card .no{font-family:var(--font-title);font-size:17px;color:var(--sage-dark)}
.stage-card .ttl{font-family:var(--font-title);font-size:25px;line-height:1.15}
.stage-card .desc{font-size:15px;color:var(--muted)}
.stage-card .tag{margin-top:auto;font-size:14px;color:var(--teal-dark)}
.stage-card.final{border-color:var(--teal-dark);box-shadow:0 5px 0 var(--teal-dark);background:#dff0ec}
.stage-card.final .no{color:var(--teal-dark)}
.stage-card.locked{background:#e6e3dc;border-color:var(--gray-ink);box-shadow:0 5px 0 var(--gray-ink);color:var(--gray-ink);cursor:not-allowed}
.stage-card.locked .no,.stage-card.locked .desc,.stage-card.locked .tag{color:var(--gray-ink)}
.stage-card .lock{position:absolute;top:12px;right:14px;font-size:24px}
.home-foot{padding:0 28px 30px;display:flex;gap:12px;flex-wrap:wrap}

/* 게임 화면 */
#screen-game.active{display:grid;grid-template-rows:var(--top-h) 1fr var(--bottom-h)}
.topbar{display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--sage);color:#fff;border-bottom:3px solid var(--sage-dark)}
.topbar .logo{font-family:var(--font-title);font-size:22px;white-space:nowrap}
.stage-chip{background:rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;font-family:var(--font-title);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.save-pill{margin-left:auto;background:var(--beige-2);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:14px;white-space:nowrap;border:2px solid transparent}
.save-pill.saving{border-color:var(--warn)}
.save-pill.saved{border-color:var(--sage-dark)}
.save-pill.error{background:#f6d6cd;border-color:var(--danger);color:#7a2f22}
.save-pill.changed{border-color:var(--teal)}
.topbar .btn{min-height:42px;font-size:16px;padding:4px 12px}
.game-main{display:flex;min-height:0;position:relative}
.canvas-wrap{flex:1;min-width:0;position:relative;background:#cbd9a8;overflow:hidden}
#map{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}
.map-controls{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.map-controls .btn{min-height:44px;font-size:16px;padding:4px 12px}
.coming-banner{position:absolute;left:12px;bottom:66px;right:12px;max-width:560px;background:rgba(255,248,224,.95);border:2px dashed var(--warn);border-radius:10px;padding:8px 12px;font-size:14px}
.time-bar{position:absolute;left:10px;top:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:none}
.time-bar > *{pointer-events:auto}
.clock{background:rgba(248,239,220,.95);border:2px solid var(--brown);border-radius:10px;padding:4px 12px;font-family:var(--font-title);font-size:17px;min-height:44px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.seg{display:flex;background:rgba(248,239,220,.95);border:2px solid var(--brown);border-radius:10px;overflow:hidden}
.seg button{min-height:42px;min-width:46px;padding:0 10px;border:none;border-right:1px solid var(--gray);background:transparent;font-family:var(--font-title);font-size:16px}
.seg button:last-child{border-right:none}
.seg button.active{background:var(--teal);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.meter{height:10px;background:var(--beige);border-radius:999px;overflow:hidden;min-width:90px;flex:1;margin-left:10px;align-self:center}
.meter > i{display:block;height:100%;background:var(--sage)}
.meter.warn > i{background:var(--warn)}
.meter.bad > i{background:var(--danger)}
.cmp-table{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0}
.cmp-table th,.cmp-table td{border-bottom:1px solid var(--gray);padding:6px 8px;text-align:right}
.cmp-table th:first-child,.cmp-table td:first-child{text-align:left}
.up{color:var(--sage-dark)} .down{color:var(--danger)}
.observe{background:#fff3cf;border:2px dashed var(--warn);border-radius:10px;padding:10px 12px;margin-top:12px;font-family:var(--font-title);font-size:18px}
.side-panel{width:var(--panel-w);background:var(--beige-2);border-left:3px solid var(--brown);display:flex;flex-direction:column;min-height:0}
.side-panel.collapsed{display:none}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;border-bottom:2px solid var(--beige)}
.tool-btn{min-height:58px;border:2px solid var(--brown);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;gap:2px;padding:2px}
.tool-btn .ic{font-size:22px;line-height:1}
.tool-btn.active{background:var(--teal);border-color:var(--teal-dark);color:#fff}
.undo-row{display:flex;gap:6px;padding:0 10px 10px;border-bottom:2px solid var(--beige)}
.undo-row .btn{flex:1}
.tabs{display:flex;gap:4px;padding:8px 10px 0}
.tab{flex:1;min-height:42px;border:2px solid var(--brown);border-bottom:none;border-radius:10px 10px 0 0;background:var(--beige);font-family:var(--font-title);font-size:16px}
.tab.active{background:#fff}
.tab-body{flex:1;overflow:auto;background:#fff;margin:0 10px 10px;border:2px solid var(--brown);border-radius:0 0 10px 10px;padding:12px}
.chips{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.chip{min-height:36px;padding:2px 12px;border-radius:999px;border:2px solid var(--sage-dark);background:#fff;font-size:15px}
.chip.active{background:var(--sage);color:#fff}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pal-item{border:2px solid var(--gray);border-radius:12px;background:var(--beige-2);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px}
.pal-item canvas{image-rendering:pixelated;width:48px;height:48px}
.pal-item .nm{font-family:var(--font-title);font-size:17px}
.pal-item .kind{font-size:12px;border-radius:999px;padding:0 8px}
.kind.living{background:#dcebc6;color:#3f5a38}
.kind.nonliving{background:#e7e1d6;color:#5b4431}
.pal-item.active{border-color:var(--teal-dark);background:#dff0ec;box-shadow:0 0 0 2px var(--teal) inset}
.count-line{font-size:14px;color:var(--muted);margin:10px 0 0}
.info-card h3{font-size:22px;margin-bottom:6px}
.info-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--gray);font-size:15px}
.info-row b{font-weight:400;color:var(--muted)}
.feature-list{list-style:none;padding:0;margin:8px 0 0;font-size:15px}
.feature-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 0}
.badge{font-size:12px;border-radius:999px;padding:1px 8px;white-space:nowrap}
.badge.ready{background:#dcebc6;color:#3f5a38}
.badge.soon{background:#ece8e0;color:var(--gray-ink)}
.terrain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.terrain-sw{border:2px solid var(--gray);border-radius:10px;background:#fff;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;min-height:78px}
.terrain-sw canvas{width:36px;height:36px;image-rendering:pixelated;border:1px solid rgba(0,0,0,.15)}
.terrain-sw.active{border-color:var(--teal-dark);background:#dff0ec}
.brush-row{display:flex;gap:6px;margin:12px 0}
.brush-row .chip{flex:1}
.field{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-size:15px}
.field input[type=text],.field input[type=number],.field select,.field textarea{min-height:42px;border:2px solid var(--gray);border-radius:8px;padding:6px 10px;background:#fff}
.check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:15px}
.check input{width:22px;height:22px}
.bottombar{display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--beige-2);border-top:3px solid var(--brown);font-size:15px;min-width:0}
.bottombar .cur-tool{font-family:var(--font-title);font-size:17px;color:var(--teal-dark);white-space:nowrap}
.bottombar .hint{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.bottombar .msg{white-space:nowrap;color:var(--brown-dark)}

@media (max-width:980px){
  :root{--panel-w:300px}
  .side-panel{position:absolute;top:0;right:0;bottom:0;z-index:6;box-shadow:-6px 0 0 rgba(91,68,49,.18)}
  .topbar .logo{display:none}
}
@media (max-width:620px){
  .bottombar .hint{display:none}
  .save-pill{font-size:12px}
}

/* 관리자 */
#screen-admin{overflow:auto;background:var(--beige)}
.admin-head{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--brown);color:#fff;flex-wrap:wrap}
.admin-head h1{font-size:28px}
.admin-head .who{margin-left:auto;font-size:14px;opacity:.9}
.admin-tabs{display:flex;gap:6px;padding:12px 22px 0;flex-wrap:wrap}
.admin-tabs .tab{flex:none;padding:0 18px;background:var(--beige-2)}
.admin-tabs .tab.active{background:#fff}
.admin-body{margin:0 22px 30px;background:#fff;border:2px solid var(--brown);border-radius:0 12px 12px 12px;padding:18px;min-height:60vh}
.admin-body h2{font-size:24px;margin:0 0 10px}
.admin-body p{line-height:1.6;max-width:72ch}
.stage-table{width:100%;border-collapse:collapse;font-size:16px}
.stage-table th,.stage-table td{border-bottom:1px solid var(--gray);padding:8px;text-align:left;vertical-align:middle}
.stage-table th{font-weight:400;color:var(--muted);font-size:14px}
.status-open{color:var(--sage-dark);font-family:var(--font-title)}
.status-locked{color:var(--gray-ink);font-family:var(--font-title)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.works-wrap{overflow:auto;max-height:65vh;border:1px solid var(--gray);border-radius:8px}
.works-table{border-collapse:collapse;font-size:14px;min-width:900px;width:100%}
.works-table th,.works-table td{border-bottom:1px solid var(--gray);padding:6px 8px;text-align:left;white-space:nowrap}
.works-table th{position:sticky;top:0;background:var(--beige-2);font-weight:400}
.cell-btn{border:1px solid var(--sage-dark);background:var(--leaf-2);border-radius:6px;padding:4px 8px;font-size:13px;min-height:32px}
.cell-empty{color:var(--gray)}
.type-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.type-card{border:2px solid var(--gray);border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center}
.type-card canvas{width:44px;height:44px;image-rendering:pixelated}
.type-card .meta{flex:1;font-size:14px}
.type-card .meta b{font-family:var(--font-title);font-weight:400;font-size:18px;display:block}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--beige-2);padding:2px 6px;border-radius:6px;word-break:break-all}
.restore-box{border:2px dashed var(--teal);border-radius:10px;padding:14px;margin-top:12px}

/* 모달·토스트 */
.modal-back{position:fixed;inset:0;background:rgba(59,56,44,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--beige-2);border:3px solid var(--brown-dark);border-radius:16px;box-shadow:0 6px 0 var(--brown-dark);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:20px}
.modal.wide{max-width:1000px}
.modal h2{font-size:26px;margin-bottom:10px}
.modal .body{font-size:16px;line-height:1.6}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.preview-canvas{width:100%;height:auto;image-rendering:pixelated;border:2px solid var(--brown);border-radius:8px;background:#cbd9a8}
#toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast-item{background:var(--brown-dark);color:#fff;padding:10px 18px;border-radius:12px;font-size:16px;max-width:90vw;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.toast-item.error{background:var(--danger)}
.toast-item.ok{background:var(--sage-dark)}

/* Optional small-organism location overlay */
.tiny-toggle { position:absolute; left:12px; bottom:14px; z-index:5; }
.tiny-toggle[aria-pressed='true'] { outline:2px solid #e5b95d; }

.category-heading { grid-column:1 / -1; width:100%; padding:8px 4px 4px; font-weight:700; color:#526d48; border-bottom:1px solid #d4d0b8; }

/* Pixel-art start scene — original assets are independent layers. */
#screen-login.start-scene{overflow:hidden;background:#a6d9d7;isolation:isolate}
.start-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none;image-rendering:auto}
.start-title{position:absolute;left:50%;top:30%;width:min(52vw,760px);max-width:90vw;height:auto;transform:translate(-50%,-50%);animation:start-title-float 3s ease-in-out infinite;pointer-events:none;user-select:none;image-rendering:pixelated}
@keyframes start-title-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}
.start-image-button{position:absolute;left:50%;top:75%;transform:translate(-50%,-50%);width:clamp(180px,21vw,290px);padding:0;border:0;background:none;box-shadow:none;display:block;line-height:0;cursor:pointer;touch-action:manipulation}
.start-image-button img{display:block;width:100%;height:auto;image-rendering:pixelated;user-select:none}
.start-image-button:focus-visible{outline:3px solid #315b40;outline-offset:6px;border-radius:16px}
.start-teacher-login{position:absolute;right:clamp(12px,2.5vw,36px);bottom:clamp(12px,2.5vh,28px);border:0;border-radius:8px;padding:8px 12px;background:rgba(250,248,224,.85);color:#35563a;font-size:14px;cursor:pointer}
.start-teacher-login:focus-visible{outline:3px solid #35563a;outline-offset:3px}
@media(max-width:650px){.start-title{width:min(88vw,560px);top:32%}.start-image-button{width:clamp(170px,46vw,260px);top:73%}}
@media(max-height:500px){.start-title{width:min(43vw,560px);top:28%}.start-image-button{width:min(24vw,190px);top:75%}}
@media(prefers-reduced-motion:reduce){.start-title{animation:none}}

/* Stage 15: loading artwork, with only spinner and guidance above it */
#screen-loading{position:relative;overflow:hidden;background:#a6d9d7}
#screen-loading .loading-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
#screen-loading .center-wrap{position:relative;z-index:1}
#screen-loading .game-title{display:none}
/* Double the start overlays, while preventing clipping on small viewports. */
.start-title{width:min(104vw,1520px);max-width:96vw;max-height:43vh;object-fit:contain}
.start-image-button{width:min(42vw,580px);max-width:90vw}
@media(max-width:650px){.start-title{width:96vw;max-height:42vh;top:30%}.start-image-button{width:min(92vw,520px);top:75%}}
@media(max-height:500px){.start-title{width:min(86vw,1120px);max-height:42vh;top:28%}.start-image-button{width:min(45vw,380px);top:75%}}

/* v28: stage selection visual assets. Functionality and permissions unchanged. */
#screen-home{background:#c4dba3 url('../assets/stage-selection/backgrownd.png') center center / cover fixed no-repeat}
#screen-home .home-head,#screen-home .home-foot{position:relative;z-index:1}
#screen-home .home-head .game-title,#screen-home .home-head .game-sub{text-shadow:0 2px 3px rgba(255,250,229,.85)}
#screen-home .stage-trail{margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;max-width:1150px}
#screen-home .stage-card{border:0;border-radius:0;box-shadow:none;background:transparent url('../assets/stage-selection/board-normal.png') center / 100% 100% no-repeat;min-height:245px;align-items:center;text-align:center;padding:22px 25px 27px;gap:4px;color:#5d422b;transition:transform .12s ease,filter .12s ease}
#screen-home .stage-card:not(.locked):hover{transform:translateY(-3px);filter:brightness(1.05)}
#screen-home .stage-card:active:not(.locked){transform:translateY(1px)}
#screen-home .stage-card.final{background-image:url('../assets/stage-selection/board-selected.png')}
#screen-home .stage-card.locked{background-image:url('../assets/stage-selection/board-muted.png');filter:saturate(.7);cursor:not-allowed}
#screen-home .stage-card .stage-art{width:80px;height:80px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
#screen-home .stage-card .no{font-size:15px;color:#835d37}
#screen-home .stage-card .ttl{font-size:21px;line-height:1.15;color:#523a28}
#screen-home .stage-card .desc{font-size:13px;line-height:1.25;color:#745b43}
#screen-home .stage-card .tag{font-size:12px;color:#5e7050}
#screen-home .stage-card.locked .no,#screen-home .stage-card.locked .desc,#screen-home .stage-card.locked .tag{color:#79726a}
#screen-home .stage-card .lock{top:12px;right:16px;font-size:20px}
@media(max-width:640px){#screen-home .stage-trail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}#screen-home .stage-card{min-height:225px;padding:18px 12px 20px}#screen-home .stage-card .stage-art{width:60px;height:60px}#screen-home .stage-card .ttl{font-size:17px}#screen-home .stage-card .desc{font-size:12px}}
@media(max-width:380px){#screen-home .stage-trail{grid-template-columns:1fr}}

/* v36: lesson-selection final design; scoped to home screen only */
#screen-home{background:#c6df83 url('../assets/lesson-final/backgrownd.png') center center/cover fixed no-repeat;color:#65472f;overflow-y:auto;min-height:100vh;font-family:OkDanDan,'Ok',sans-serif}
#screen-home .lesson-top{max-width:1240px;margin:0 auto 35px;padding:24px 30px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
#screen-home .lesson-brand img{display:block;width:310px;max-width:100%;height:auto;image-rendering:pixelated}
#screen-home .lesson-profile{background:#f8eed7;border:3px solid #98704e;border-radius:12px;padding:12px 14px;display:flex;gap:16px;align-items:center;box-shadow:0 3px #6d4a31;font-size:14px}
#screen-home .lesson-profile strong{display:block;font-size:22px}
#screen-home .lesson-profile small{display:block;color:#aa9272}
#screen-home .lesson-profile button{font:inherit;font-size:16px;background:#fdf4df;border:2px solid #6c4935;border-radius:9px;padding:9px;box-shadow:0 3px #6c4935;cursor:pointer}
#screen-home .lesson-grid{max-width:1180px;margin:0 auto;padding:0 30px 80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:74px 24px}
#screen-home .lesson-card{text-align:center;min-width:0;position:relative}
#screen-home .lesson-wood{width:min(100%,292px);aspect-ratio:691/615;position:relative;margin:0 auto;background:none;display:flex;align-items:center;justify-content:center;padding:35px 37px}
#screen-home .lesson-wood::before{content:'';position:absolute;inset:0;z-index:2;background:url('../assets/lesson-final/board-open-trim.png') center/100% 100% no-repeat;pointer-events:none}
#screen-home .lesson-card.is-closed .lesson-wood::before{background-image:url('../assets/lesson-final/board-closed-trim.png')}
#screen-home .lesson-card.is-closed .lesson-wood{aspect-ratio:724/567}
#screen-home .lesson-card.is-final{grid-column:2}
#screen-home .lesson-card.is-final .lesson-wood{aspect-ratio:704/649}
#screen-home .lesson-card.is-final .lesson-wood::before{background-image:url('../assets/lesson-final/board-final-open-trim.png')}
#screen-home .lesson-art{position:absolute;z-index:1;width:203px;height:203px;max-width:none;object-fit:contain;top:-113px;left:73%;transform:translateX(-50%);image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 1px #8b693a40)}
#screen-home .lesson-card:nth-child(2) .lesson-art{top:-113px}
#screen-home .lesson-card:nth-child(4) .lesson-art{top:-53px}
#screen-home .lesson-card.is-final .lesson-art{top:-113px}
#screen-home .lesson-copy{padding:0;text-align:center;width:100%;position:relative;z-index:3}
#screen-home .lesson-copy h2{font-size:22px;margin:0 0 9px;line-height:1.22;word-break:keep-all;color:#FFF3D9}
#screen-home .lesson-copy p{font-size:15px;line-height:1.4;margin:0;color:#76563a;word-break:keep-all}
#screen-home .lesson-num{display:inline-flex;justify-content:center;align-items:center;min-width:92px;height:37px;position:absolute;top:181px;left:50%;transform:translateX(-50%);z-index:5;background:url('../assets/lesson-final/pill-0.png') center/100% 100% no-repeat;font-size:18px;color:#795335}
#screen-home .lesson-card.is-open .lesson-num{background-image:url('../assets/lesson-final/pill-1.png')}
#screen-home .lesson-enter{font:inherit;font-size:18px;margin-top:-13px;position:relative;z-index:3;width:156px;height:49px;border:0;background:url('../assets/lesson-final/button-0.png') center/100% 100% no-repeat;color:#64442c;cursor:pointer}
#screen-home .lesson-enter:hover{background-image:url('../assets/lesson-final/button-1.png')}
#screen-home .lesson-card.is-final .lesson-enter{background-image:url('../assets/lesson-final/button-1.png')}
#screen-home .lesson-card.is-closed .lesson-enter{cursor:not-allowed}
#screen-home .home-foot{max-width:1180px;margin:0 auto;padding:0 30px 40px}
@media(max-width:780px){#screen-home .lesson-top{flex-direction:column}#screen-home .lesson-grid{gap:65px 12px}#screen-home .lesson-wood{padding:27px 26px}#screen-home .lesson-art{width:171px;height:171px;top:-91px;left:73%}#screen-home .lesson-card:nth-child(2) .lesson-art{top:-91px}#screen-home .lesson-card:nth-child(4) .lesson-art{top:-31px}#screen-home .lesson-card.is-final .lesson-art{top:-91px}#screen-home .lesson-copy h2{font-size:18px}#screen-home .lesson-copy p{font-size:13px}#screen-home .lesson-brand img{width:250px}}
@media(max-width:560px){#screen-home .lesson-grid{grid-template-columns:1fr;max-width:340px;margin:auto}#screen-home .lesson-card.is-final{grid-column:1}#screen-home .lesson-top{padding:20px}}
/* 2026-10: 단계가 다섯 개 + 최종이 되어 3개씩 두 줄로 놓임. 최종 카드도 둘째 줄 끝에 오도록(원래는 셋째 줄 가운데 고정) */
@media(min-width:561px){#screen-home .lesson-card.is-final{grid-column:auto}}