/* ==========================================================================
   🪑 내 책상 (아이들 홈 · 2026-10-17) — img/desk/ 그림 위에 물건을 올린 홈 화면
   body.desk : 왼쪽 사이드바 대신 전체 화면 + 🏠 그림 버튼
   ========================================================================== */
body.desk #topbar{display:none !important}
body.desk #app{margin-left:0 !important;max-width:none;padding:14px 18px 60px}
body.desk .dk-wrap{max-width:1180px;margin:0 auto}
.dk-hud{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:18px}
.dk-hud .dk-logo{height:56px;width:auto;display:block;margin-right:14px;flex:none}   /* 프로필 줄 맨 앞 로고 (10-18 「프로필 있는 곳에 로고 · 프로필은 그 옆」) */
.dk-hud .av-btn{border:0;background:none;padding:0;cursor:pointer}.dk-hud .av-btn img,.dk-hud .av-btn .av{width:46px;height:46px;border-radius:50%}
/* 프로필 줄의 종·저금통 (10-18 · 책상 그림에서 옮김) · 종은 새 호출 때 한 번만 흔들림 */
.dk-hbtn{position:relative;border:0;background:none;padding:0;cursor:pointer;width:84px;height:84px;flex:none;transition:transform .15s}
.dk-hbtn img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.dk-hbtn:hover{transform:scale(1.06)}.dk-hbtn:active{transform:scale(.95)}
.dk-bell{left:4.2%;top:13%;width:8.5%;height:16.8%}.dk-bell img{object-position:center bottom}   /* 예전 창문 자리 */
.dk-bell.ring img{transform-origin:50% 12%;animation:dk-ring1 .4s ease-in-out 3}
@keyframes dk-ring1{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(16deg)}}
.dk-hud .pill.lv{font-size:12px}.dk-time{font-weight:800;font-variant-numeric:tabular-nums;font-size:20px;background:#fff;border-radius:14px;padding:6px 14px;box-shadow:0 4px 14px rgba(30,35,64,.08)}
/* 책상 장면 : 배경 비율 1586×992 · 물건은 % 자리 */
.dk-scene{position:relative;width:100%;aspect-ratio:1586/992;background:url(../img/desk/bg.png) center/100% 100% no-repeat;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(30,35,64,.10)}
/* 책상 꾸미기 층 (10-31) : 벽지 → 바닥 → 러그 → 책상 · 물건 자리는 예전 배경과 같음 (그림 크기 1586×992 같음) */
.dk-scene.deco{background:#fff}
.dk-deco{position:absolute;inset:0;pointer-events:none}.dk-deco img{position:absolute;display:block}
.dk-deco .w{left:0;top:0;width:100%;height:100%;object-fit:cover}.dk-deco .f{left:0;top:80.8%;width:100%;height:19.2%}
.dk-deco .r{left:50%;bottom:.7%;width:57%;transform:translateX(-50%)}.dk-deco .d{left:0;top:0;width:100%;height:100%}
.dk-deco .doll{left:67.5%;bottom:40.5%;width:9.5%}   /* 책상 위 오른쪽 · 펼친 책 옆 */
.dk-deco .lamp{left:78%;bottom:41.5%;height:19%;max-width:13%;width:auto;transform:translateX(-50%)}   /* 책상 위 오른쪽 끝 · 인형 뒤 (11-05) */
.dk-deco .shelf{left:69.5%;bottom:61.8%;height:11.5%;max-width:12%;width:auto;transform:translateX(-50%)}   /* 아래 선반 오른쪽 칸 · 키에 맞춤 */
.dk-deco .plant{left:30.5%;bottom:61.8%;height:12%;max-width:13%;width:auto;transform:translateX(-50%)}   /* 아래 선반 왼쪽 칸 (바닥 왼쪽은 숙제 가방 자리) */
.dk-deco .hang{right:2%;top:0;height:50%;max-width:12%;width:auto}   /* 오른쪽 벽 · 공부 시간 상자 뒤에서 내려옴 · 문 위 */
.dk-deco .art{left:8.5%;top:33%;max-height:24%;max-width:14%;transform:translateX(-50%)}   /* 왼쪽 벽 · 종과 가방 사이 */
.dk-deco .under{left:50%;bottom:2.5%;max-height:27%;max-width:30%;transform:translateX(-50%)}   /* 책상 밑 바닥 가운데 · 러그 위 */
.dk-deco .curio{left:40.5%;bottom:61.8%;max-height:8.5%;max-width:7%;transform:translateX(-50%)}   /* 아래 선반 · 화분과 책 표지 사이 (작은 것 · .mini 는 버튼 이름이라 curio) */
/* 책상 크기 (10-31 원장님 「책상이 너무 커 · 꾸미면 지저분」) : 책상 그림 + 책상 위·밑 물건 + 책상 위 버튼을 한 묶음으로 줄임 · 다리 끝(94.6%) 기준 · 벽·바닥·벽 장식은 그대로 */
.dk-desk{position:absolute;inset:0;transform:scale(.82);transform-origin:50% 94.6%}.dk-desk-obj{pointer-events:none}.dk-desk-obj>*{pointer-events:auto}
.dk-deco .garland{left:0;top:-3%;width:100%}   /* 벽 위쪽 끝에서 끝까지 · 책상 앞 (종·책·시간 상자는 위에 그대로) */
.dk-obj{position:absolute;border:0;background:none;padding:0;cursor:pointer;transition:transform .15s}
.dk-obj img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.dk-obj:hover{transform:scale(1.06)}.dk-obj:active{transform:scale(.96)}
.dk-badge{position:absolute;right:-6px;top:-6px;min-width:26px;height:26px;border-radius:13px;background:#e04b4b;color:#fff;font-style:normal;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;padding:0 7px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.dk-badge.q{background:#2f86f6}.dk-badge.wait{width:auto;min-width:0;padding:0 10px;right:-38px;top:-4px;font-size:13px;letter-spacing:.5px;white-space:nowrap}   /* 검사 대기중 (10-19) */.dk-badge.pt{display:none}
/* 선반 : 윗단 = 오늘 · 아랫단 = 오늘 안 하는 책 */
.dk-shelf{position:absolute;left:23.5%;width:53.5%;display:flex;align-items:flex-end;gap:2.2%;padding:0 2%}
.dk-shelf.top{top:7%;height:17%;left:36.5%;width:40.5%}   /* 왼쪽 끝은 달력 자리 */.dk-shelf.low{top:25.5%;height:12.5%}
.dk-book{position:relative;border:0;background:none;padding:0;cursor:pointer;height:100%;display:flex;align-items:flex-end;transition:transform .2s}
.dk-book img{height:100%;width:auto;display:block;filter:drop-shadow(2px 4px 4px rgba(0,0,0,.18))}
.dk-book span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;color:#fff;font-weight:900;font-size:clamp(9px,1.1vw,14px);text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;letter-spacing:.3px}
.dk-book.next{transform:translateY(-9%);animation:dk-wiggle 2.2s ease-in-out infinite}
.dk-book.next::after{content:'▼';position:absolute;left:50%;top:-30%;transform:translateX(-50%);color:#e04b4b;font-size:clamp(12px,1.4vw,18px);animation:dk-bob 1s ease-in-out infinite}
.dk-book.rest{opacity:.75;filter:saturate(.3)}.dk-book.rest span{color:#f4f4f4}
.dk-book.done img:first-child{filter:drop-shadow(2px 4px 4px rgba(0,0,0,.18)) brightness(1.05)}
.dk-book .dk-star{position:absolute;right:-22%;top:-18%;width:60%;height:auto;animation:dk-twinkle 1.6s ease-in-out infinite}
.dk-empty{color:#8a6d3b;font-weight:700;font-size:clamp(12px,1.4vw,16px);align-self:center;margin:auto}
/* 벽·책상 위 물건 자리 (bg 기준 %) */
/* 책 줄 그림 (맨 위 선반 · 달력 오른쪽) + 책장 열기 버튼 (책 줄 한가운데 위에 겹침 · 10-18 「책들 위에 한가운데」) */
.dk-books{left:34.5%;top:13.6%;width:42%;height:10.1%;background:url(../img/desk/books-row.png) left bottom/auto 100% repeat-x;filter:drop-shadow(1px 3px 3px rgba(0,0,0,.18))}.dk-books:hover{transform:none;filter:drop-shadow(1px 3px 3px rgba(0,0,0,.18)) brightness(1.04)}   /* 레벨 이름표(배경 맨 위) 아래 칸에 맞춤 · 책 줄 그림을 옆으로 이어 붙여 선반을 채움 (10-18) */
.dk-shelfbtn{left:47%;top:15.3%;width:17%;height:6.6%;z-index:2;background:url(../img/desk/B13_shelf.png) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.dk-shelfbtn:active{background-image:url(../img/desk/B13_shelf-down.png);transform:translateY(2px)}
/* Daily Routine 달력 = 맨 위 선반 왼쪽 끝 (10-18 「창문은 때려치고 달력으로 · 책상 맨 위에 · 다 했으면 CLEAR 도장」) · 계속 반짝이던 것 뺌 */
.dk-cal{left:24.3%;top:10.8%;width:10%;height:13.2%}.dk-cal img{object-position:center bottom}
.dk-clock{left:87%;top:7%;width:10.5%;height:17%}.dk-clock img{animation:dk-tick 4s steps(1) infinite}
.dk-door{left:86.5%;top:54%;width:11.5%;height:26%}.dk-door img{object-position:center bottom}   /* 10-18 문 그림 = 움직이는 문 첫 장면(또렷) · 바닥에 붙임 · 「문이 너무 커 집에 가고 싶겠다」로 줄임 */
.dk-open{left:37%;top:41%;width:30%;height:20%}.dk-obj img.dk-open-cv{position:absolute;left:50%;bottom:30%;height:118%;width:auto;aspect-ratio:3/4;object-fit:cover;transform:translateX(-50%) rotate(-3deg);border-radius:4px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}   /* 지금 꺼낸 교재 표지 (10-19) */.dk-open.on img{filter:drop-shadow(0 0 14px rgba(255,200,60,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.dk-note{left:24%;top:42.5%;width:13%;height:18%}.dk-note img{object-position:center bottom}
.dk-bag{left:3%;top:58%;width:13%;height:30%}.dk-bag.on img{animation:dk-bob 1.6s ease-in-out infinite}
/* 펼친 책 내용 (칸 목록 · Daily Routine · 숙제) */
.dk-sheet{margin-top:14px;background:#fffdf7;border:2px solid #efe3c8;border-radius:22px;padding:18px 18px 22px;box-shadow:0 10px 30px rgba(30,35,64,.08)}
.dk-sheet .track-list{margin:0}.dk-hint{text-align:center;color:#8a6d3b;font-size:20px;font-weight:800;padding:28px 10px}
.dk-chips{margin:10px 0 16px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
/* 🏠 홈으로 (책상 화면이 아닌 다른 화면에서) */
#deskHomeBtn{position:fixed;left:14px;top:14px;z-index:60;width:64px;height:64px;border:0;background:url(../img/desk/B5_home.png) center/contain no-repeat;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
#deskHomeBtn:active{background-image:url(../img/desk/B5_home-down.png)}#deskHomeBtn.hidden{display:none}
/* 아이들 화면 그림 버튼 (글자 대신 그림 · 사용자 10-17 「버튼도 모두 그림」) */
body.kids .go-btn,body.kids .tick,body.kids .spk-btn,body.kids .ghost-btn,body.kids .btn.ok,body.kids .mini.au,body.kids .sd-go{
  font-size:0 !important;line-height:0;width:66px;height:66px;min-width:66px;padding:0 !important;border:0 !important;border-radius:50%;background:center/contain no-repeat !important;box-shadow:none !important;color:transparent !important;flex:none}
body.kids .go-btn{background-image:url(../img/desk/B1_start.png) !important}body.kids .go-btn:active{background-image:url(../img/desk/B1_start-down.png) !important}
body.kids .sd-go{background-image:url(../img/desk/B1_start.png) !important;width:84px;height:84px}body.kids .sd-go:active{background-image:url(../img/desk/B1_start-down.png) !important}
body.kids .tick{background-image:url(../img/desk/B2_complete.png) !important}body.kids .tick:active{background-image:url(../img/desk/B2_complete-down.png) !important}
body.kids .hw-box .tick,body.kids .tick.submit{background-image:url(../img/desk/B9_homework.png) !important}body.kids .hw-box .tick:active,body.kids .tick.submit:active{background-image:url(../img/desk/B9_homework-down.png) !important}
/* 아직 안 한 칸은 글자 「완료」 버튼 · 끝낸 칸만 초록 체크 그림 (원장님 10-19 「안 했는데 왜 체크표시」) */
body.kids .tick:not(.on){font-size:17px !important;line-height:1.2;width:auto;height:auto;min-width:0;padding:11px 22px !important;border-radius:999px;background:var(--ac) !important;background-image:none !important;color:#fff !important;font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--ac-text) !important}
body.kids .tick:not(.on):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ac-text) !important;background-image:none !important}
.tick-done{display:none}body.kids .tick-done{display:inline-block;flex:none;width:66px;height:66px;background:url(../img/desk/B2_complete.png) center/contain no-repeat}
/* 대답 버튼(네·알겠어요·아니요·제출하기 …)은 그림 대신 글자 그대로 (10-18 「검사받으러 오세요에 왜 엄지척 · 확인이나 네 하면 되지」) */
body.kids .big-btn{display:block;margin:10px auto 0;min-width:150px;padding:14px 34px !important;border:0 !important;border-radius:999px;background:var(--ac) !important;color:#fff !important;font-size:22px !important;font-weight:900;line-height:1.2;letter-spacing:1px;box-shadow:0 5px 0 var(--ac-text),0 8px 18px rgba(var(--ac-rgb),.25) !important;cursor:pointer;transition:transform .08s}body.kids .big-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ac-text) !important}
body.kids .big-btn.no{background:#eef0f4 !important;color:#4a4458 !important;box-shadow:0 5px 0 #cfd3dc !important}
body.kids .cp-btns .big-btn,body.kids .ph-btns .big-btn,body.kids .leave-banner .big-btn{min-width:0;padding:14px 16px !important;white-space:nowrap;margin:0}
body.kids .btn.ok{background-image:url(../img/desk/B4_next.png) !important}body.kids .btn.ok:active{background-image:url(../img/desk/B4_next-down.png) !important}
body.kids .ghost-btn{background-image:url(../img/desk/B5_home.png) !important;width:56px;height:56px;min-width:56px}body.kids .ghost-btn:active{background-image:url(../img/desk/B5_home-down.png) !important}
/* 팝업 안 버튼(포인트 창 「🔒 마켓은 하원 허락을 받으면 열려요」 · 닫기 · 취소 · 품절 …)은 집 그림 말고 글씨로 (10-19 사용자 「홈 버튼 무쓸모 · 눌러도 반응 없음」) */
body.kids .modal .ghost-btn{font-size:15px !important;line-height:1.35;width:auto;height:auto;min-width:0;padding:11px 20px !important;border-radius:999px;background:#efeaf2 !important;color:#4a4458 !important;font-weight:800;border:0 !important}
body.kids .modal .ghost-btn:active{background:#e2dbe8 !important}body.kids .modal .ghost-btn:disabled{opacity:.85}
body.kids .mini.au{background-image:url(../img/desk/B6_listen.png) !important;width:48px;height:48px;min-width:48px}body.kids .mini.au:active{background-image:url(../img/desk/B6_listen-down.png) !important}
/* 아이 화면 음원 단추 : 듣는 중 = 스피커 깜빡임(extra.css .on) · 일시정지 = 멈춤 그림(ic-pause) + 주황 테두리 숨쉬기 · 잠김 = 흐리게 (원장님 11-01) — box-shadow 는 위에서 none !important 라 outline 으로 */
body.kids .mini.au.paused,body.kids .mini.au.paused:active{background-image:url(../img/desk/ic-pause.png) !important;outline:4px solid #f97316;outline-offset:2px;animation:au-ring 1.2s ease-in-out infinite}
body.kids .mini.au.locked{opacity:.4}
body.kids .mini.au.heard{outline:3px solid #27ae60;outline-offset:2px}   /* 들은 단추 : 초록 테두리 (11-01) */
@keyframes au-ring{50%{outline-color:rgba(249,115,22,.25)}}
body.kids .spk-btn{background-image:url(../img/desk/B7_record.png) !important;width:84px;height:84px}body.kids .spk-btn:active{background-image:url(../img/desk/B7_record-down.png) !important}
body.kids .spk-btn.listen{background-image:url(../img/desk/B6_listen.png) !important}body.kids .spk-btn.listen:active{background-image:url(../img/desk/B6_listen-down.png) !important}
body.kids .sd-mic{background:url(../img/desk/B7_record.png) center/contain no-repeat !important;animation:none;width:84px;height:84px}body.kids .sd-mic span{display:none}
body.kids .sd-mic.stop{background-image:url(../img/desk/B8_stop.png) !important}body.kids .sd-mic:active{filter:brightness(.9)}
body.kids .btn.ok:disabled,body.kids .go-btn:disabled{opacity:.35;background-image:url(../img/desk/B12_locked.png) !important}
/* 글자 버튼 (.btn.ok.txt) : 화살표 그림 대신 글자 그대로 — 숙제 팝업 「제출했어요」 · 단어 카드 「외웠어요」 (원장님 10-19 「화살표는 의미가 뭔지 모르겠어」) */
body.kids .btn.ok.txt,body.kids .btn.ok.txt:active,body.kids .btn.ok.txt:disabled{font-size:16px !important;line-height:1.2;width:auto;height:auto;min-width:0;padding:11px 20px !important;border-radius:999px;background:var(--ac) !important;background-image:none !important;color:#fff !important;font-weight:800;box-shadow:0 3px 0 var(--ac-text) !important}
body.kids .btn.ok.txt:disabled{opacity:.4}
/* 스피킹 버튼 (.spk-btn.txt) : 그림(SVG) + 짧은 한글 「듣기」「따라 말하기」「멈춤」「다음 문장」 — 녹음·듣기 그림만 있던 것 대신 (원장님 10-19 「대체 뭘 뜻하는 버튼인지 모르겠어」) */
body.kids .spk-btn.txt,body.kids .spk-btn.txt:active,body.kids .spk-btn.txt:disabled{font-size:22px !important;line-height:1.2;width:auto;height:auto;min-width:0;padding:14px 30px !important;border-radius:999px;color:#fff !important;font-weight:900;background:linear-gradient(135deg,#ff7a45,#ff4d7d) !important;box-shadow:0 5px 0 #c8385c,0 10px 20px rgba(255,90,100,.3) !important;display:inline-flex;align-items:center;gap:10px}
body.kids .spk-btn.txt.listen,body.kids .spk-btn.txt.listen:active{background:linear-gradient(135deg,#3b8bff,#5a5cff) !important;box-shadow:0 5px 0 #3346c8,0 10px 20px rgba(70,110,255,.3) !important}
body.kids .spk-btn.txt.next,body.kids .spk-btn.txt.next:active{background:linear-gradient(135deg,#4cc38a,#2f9e6b) !important;box-shadow:0 5px 0 #23774f,0 10px 20px rgba(60,180,120,.3) !important}
body.kids .spk-btn.txt.ghost,body.kids .spk-btn.txt.ghost:active{background:#fff !important;color:#4a5563 !important;border:2px solid #d5dde8 !important;box-shadow:0 4px 0 #d5dde8 !important}
body.kids .spk-btn.txt:active{transform:translateY(3px)}body.kids .spk-btn.txt:disabled{opacity:.45}
body.kids .spk-btn.txt .spk-ico{width:30px;height:30px}body.kids .spk-btn.txt small{font-size:14px}
/* 움직임 */
@keyframes dk-ring{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes dk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dk-wiggle{0%,90%,100%{transform:translateY(-9%) rotate(0)}93%{transform:translateY(-9%) rotate(-3deg)}97%{transform:translateY(-9%) rotate(3deg)}}
@keyframes dk-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.2) rotate(12deg);opacity:.8}}
@keyframes dk-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,220,100,0))}50%{filter:drop-shadow(0 0 16px rgba(255,220,100,.95))}}
@keyframes dk-tick{0%{transform:rotate(0)}50%{transform:rotate(0.6deg)}}
@media (max-width:760px){.dk-book span{display:none}.dk-hud{font-size:15px}.dk-hud .dk-logo{height:40px;margin-right:6px}}

/* 움직이는 그림 : 4프레임 가로 스프라이트 (anim-*.png 2172×724 · 한 장 543×724) */
.dk-sprite{display:block;width:100%;aspect-ratio:543/724;background-repeat:no-repeat;background-size:400% 100%;background-position:0 0;animation:dk-frames .9s steps(4) infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.dk-sprite.slow{animation-duration:4s}
.dk-book .dk-star.dk-sprite{position:absolute;right:-26%;top:-20%;width:70%;height:auto;aspect-ratio:543/724;animation:dk-frames 1.2s steps(4) infinite;filter:none}
.dk-obj .dk-sprite{height:100%;width:auto;aspect-ratio:543/724;margin:0 auto}
@keyframes dk-frames{from{background-position:0 0}to{background-position:133.3333% 0}}   /* 4장 : 0 · 33.3 · 66.7 · 100% (퍼센트 위치는 (칸-그림) 기준) */
/* 녹음 중 마이크 : 울리는 마이크 스프라이트 */
body.kids .sd-mic.stop{background:url(../img/desk/anim-record.png) 0 0/400% 100% no-repeat !important;width:96px;height:128px;border-radius:0;animation:dk-frames .9s steps(4) infinite}
body.kids .sd-mic.stop span{display:none}

/* 다음 할 책 : 튀어나오는 책 스프라이트 (anim-book.png · 10-18) · 세로 제목은 책등 자리(왼쪽 1/3)에 */
.dk-book .dk-sprite.book{height:100%;width:auto;aspect-ratio:543/724;animation:dk-frames 1.6s steps(4) infinite;filter:drop-shadow(2px 4px 4px rgba(0,0,0,.18))}
.dk-book.next{animation:none}
.dk-book.next span{left:22%}
/* 칸 아이콘 그림 (이모티콘 대신 · 10-18) */
.kd-img{width:36px;height:36px;object-fit:contain;vertical-align:middle;display:inline-block}
body.kids .kd-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
body.kids .common-box .kd-img,body.kids .hw-head .kd-img{width:40px;height:40px}
/* 물건 이름표 (사용자 10-18 「가방이 뭔 용도인지 모르잖아」) */
.dk-obj .dk-lbl{position:absolute;left:50%;bottom:-6%;transform:translate(-50%,100%);background:rgba(255,255,255,.92);color:#2c3a4b;border-radius:12px;padding:2px 9px;font-size:clamp(10px,1.15vw,15px);font-weight:800;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none;line-height:1.5}
.dk-open .dk-lbl{bottom:6%}.dk-cal .dk-lbl{bottom:-4%}
/* 글자 속 이모티콘 → 그림 (10-18) */
.kd-emo{width:1.35em;height:1.35em;object-fit:contain;vertical-align:-0.3em;margin:0 .1em}
.cp-ico .kd-emo{width:1em;height:1em;vertical-align:-0.15em}
body.kids .go-btn .kd-emo,body.kids .tick .kd-emo,body.kids .big-btn .kd-emo,body.kids .spk-btn .kd-emo,body.kids .ghost-btn .kd-emo,body.kids .btn.ok .kd-emo,body.kids .mini.au .kd-emo,body.kids .sd-go .kd-emo{display:none}
/* 이름표 글씨는 뺌 (사용자 10-18 「옥의 티」) — 이름이 들어간 물건 그림을 받으면 그림으로 */
.dk-obj .dk-lbl{display:none}
/* 중등 책상 (11-05) : 그림에 이름이 없어서 이름표를 보여 줌 · 책 줄 · 문 크기 */
.dk-scene.teen .dk-obj .dk-lbl{display:block;background:rgba(32,34,40,.86);color:#f3efe6;font-weight:700;border-radius:6px;box-shadow:none}
.dk-scene.teen .dk-books{background-image:url(../img/desk/teen-books-row.png)}
.dk-scene.teen .dk-door{top:45%;height:35.8%}.dk-scene.teen .dk-door .dk-lbl{bottom:1%}.dk-scene.teen .dk-bag .dk-lbl{bottom:3%}
.dk-scene.teen .dk-bell::before{content:'';position:absolute;left:-8%;right:-8%;bottom:-4%;height:6%;background:#3b2a20;border-radius:2px;box-shadow:0 4px 6px rgba(0,0,0,.28)}.dk-scene.teen .dk-bell .dk-lbl{bottom:-10%}   /* 벽 선반 위 종 */
/* 책장 열기 팝업 : 교재 표지 (10-18) */
.dk-shelf{cursor:pointer}
.dk-shelf-pop h3{margin:0 0 10px;font-size:20px}.dk-shelf-pop h3.rest{margin-top:18px;color:#8a95a3;font-size:16px}
.dk-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.dk-cover{position:relative;border:0;background:#fff;border-radius:16px;padding:10px;cursor:pointer;box-shadow:0 6px 18px rgba(30,35,64,.08);transition:transform .15s;font-family:inherit;text-align:center}
.dk-cv.essay{overflow:hidden}.dk-cv-tag{position:absolute;left:0;right:0;bottom:22%;background:#35244f;color:#dabe55;font-style:normal;font-weight:900;font-size:12px;letter-spacing:1.5px;text-align:center;padding:5px 0;box-shadow:0 2px 6px rgba(0,0,0,.25)}   /* 에세이 표지 띠 (10-19) */
.dk-cover:hover{transform:translateY(-4px)}.dk-cover:active{transform:scale(.97)}
.dk-cover.next{box-shadow:0 0 0 3px #ffd166,0 6px 18px rgba(30,35,64,.08)}.dk-cover.rest{opacity:.6;filter:saturate(.4)}
.dk-cv{display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--c,#7b8794);position:relative}
.dk-cv img{width:100%;height:100%;object-fit:cover;display:block}
.dk-cv b{display:none}.dk-cv.nocover b{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;padding:10px;color:#fff;font-size:17px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.35);word-break:keep-all}
.dk-cover small{display:block;margin-top:8px;font-size:12.5px;color:#55606d;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-cv-star{position:absolute;right:-6px;top:-10px;width:44px}.dk-cv-star img{width:100%}
body.kids .dk-shelf-pop .big-btn{margin:14px auto 0}
/* 시간 글자 상자 (시계 대신 · 10-18) */
.dk-timebox{left:85.5%;top:8%;width:13.5%;height:auto;background:rgba(255,255,255,.92);border-radius:14px;padding:.7vw .8vw;display:flex;flex-direction:column;gap:.25vw;cursor:default;box-shadow:0 4px 14px rgba(30,35,64,.10);text-align:left}
.dk-timebox:hover{transform:none}
.dk-timebox .dk-vocab{margin-top:.2vw;padding-top:.3vw;border-top:1px solid #e6e0ea;color:#8e1531 !important}   /* 외운 단어 누적 (10-18) */
.dk-timebox b{font-size:clamp(11px,1.25vw,17px);color:#2c3a4b;white-space:nowrap}.dk-timebox span{font-size:clamp(10px,1.05vw,14px);color:#55606d;font-weight:700;white-space:nowrap}

/* Daily Routine 을 고르면 선반의 달력이 펼친 책 위로 올라간 것처럼 (10-19) */
.dk-obj img.dk-open-cv.cal{aspect-ratio:auto;height:105%;object-fit:contain;border-radius:0;transform:translateX(-50%) rotate(-2deg)}
.dk-cal.out{opacity:0;pointer-events:none;transition:opacity .25s}

/* 선생님이 부르면 종 배지 「내 차례」 (10-20) */
.dk-badge.wait.now{background:#e5602a;color:#fff;animation:dkNowPulse 1.2s ease-in-out infinite}
@keyframes dkNowPulse{50%{transform:scale(1.08)}}
.dk-timebox .dk-todo{margin-top:.2vw;padding-top:.3vw;border-top:1px solid #e6e0ea;color:#c2410c !important;white-space:normal !important}   /* 하원 전에 할 일 : 재시험 (10-21) */
.dk-timebox .dk-wt.pass,.dk-timebox .dk-wt.retestDone{color:#1a7f4b !important}.dk-timebox .dk-wt.wait{color:#6f617d !important}
/* 녹음 중에는 멈춤 단추 (원장님 11-01 「여기에 녹음 버튼이 들어가면 안 돼 · 이미 녹음되고 있는데 멈춤 버튼이 들어가야지」) — 위 anim-record(녹음 그림 움직임) 대신 */
body.kids .sd-mic.stop{background:url(../img/desk/B8_stop.png) center/contain no-repeat !important;width:84px;height:84px;border-radius:50%;animation:none}

/* 🚻 잠깐 나갈게요 (11-01) : 머리 줄 저금통 옆 · 신청 중이면 주황 글자 · 나가 있으면 빨강 */
.dk-hbtn.dk-out{width:auto;min-width:84px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}.dk-hbtn.dk-out img{width:62px;height:62px}
.dk-hbtn.dk-out .dk-hlbl{font-size:14px;font-weight:800;color:#55606d;white-space:nowrap;line-height:1.1}.dk-hbtn.dk-out.pend .dk-hlbl{color:#c2410c}.dk-hbtn.dk-out.out .dk-hlbl{color:#d33}
.dk-who{display:flex;flex-direction:column;gap:1px;line-height:1.2}.dk-who>div{display:flex;align-items:center;gap:8px}
.dk-pts{border:0;background:none;padding:0;cursor:pointer;text-align:left;font-size:13px;font-weight:800;color:#a06d00;font-family:inherit}.dk-pts b{font-size:16px;color:#e8a100;font-variant-numeric:tabular-nums}.dk-pts:hover{text-decoration:underline}   /* 이름 아래 포인트 숫자 (11-01) */
/* 팝업 안 큰 버튼 한 단계 작게 (11-01 원장님 「버튼들이 무식하게 커」) : 팝업(call-pop) · 포인트/마켓 창 · 머리 줄 마켓 바 */
body.kids .call-pop .big-btn,body.kids .pts-btns .big-btn,body.kids .dk-mkbar .big-btn{font-size:17px !important;padding:10px 24px !important;min-width:140px;letter-spacing:.5px;box-shadow:0 4px 0 var(--ac-text),0 6px 14px rgba(var(--ac-rgb),.22) !important}
body.kids .out-choices .big-btn{width:auto;min-width:220px;margin:0 auto}
body.kids .call-pop .ghost-btn{font-size:14px}
/* 모든 학습 칸 단추 = Easy Link(아이 화면) 방식으로 통일 (원장님 11-03 「달곰한 Literacy 버튼 방식이 옛것 · 모든 학습 버튼 방식은 통일 · Easy Link 참고」)
   PRIME·중등처럼 아이 화면(body.kids)이 아닌 학생도 칸 목록(.steps) 안 단추는 같은 모양 :
   앱 활동 = 초록 재생 동그라미(B1_start) · 교재 음원 = 트랙 번호 + 소리 단추(B6_listen) · 종이 칸 = 「완료」 글자 알약 · 되돌리기(✓) = 초록 체크 그림
   한 줄 글자가 아이 화면보다 작아서 단추만 한 단계 작게 (재생 56 · 소리 44) */
body:not(.kids) .steps .step .go-btn,body:not(.kids) .steps .step .mini.au{font-size:0 !important;line-height:0;padding:0 !important;border:0 !important;border-radius:50%;background:center/contain no-repeat !important;box-shadow:none !important;color:transparent !important;flex:none;animation:none}
body:not(.kids) .steps .step .go-btn{width:56px;height:56px;min-width:56px;background-image:url(../img/desk/B1_start.png) !important}
body:not(.kids) .steps .step .go-btn:active{background-image:url(../img/desk/B1_start-down.png) !important}
body:not(.kids) .steps .step .go-btn:disabled{opacity:.35;background-image:url(../img/desk/B12_locked.png) !important}
body:not(.kids) .steps .step .mini.au{width:44px;height:44px;min-width:44px;background-image:url(../img/desk/B6_listen.png) !important}
body:not(.kids) .steps .step .mini.au:active{background-image:url(../img/desk/B6_listen-down.png) !important}
body:not(.kids) .steps .step .mini.au.on{animation:au-blink 1s infinite}
body:not(.kids) .steps .step .mini.au.paused,body:not(.kids) .steps .step .mini.au.paused:active{background-image:url(../img/desk/ic-pause.png) !important;outline:4px solid #f97316;outline-offset:2px;animation:au-ring 1.2s ease-in-out infinite}
body:not(.kids) .steps .step .mini.au.locked{opacity:.4}
body:not(.kids) .steps .step .mini.au.heard{outline:3px solid #27ae60;outline-offset:2px}
body:not(.kids) .steps .step .au-no{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:#9a6b2f;margin-left:12px;margin-right:4px;white-space:nowrap}
body:not(.kids) .steps .step .st-audio{display:inline-flex;align-items:center;gap:4px}body:not(.kids) .steps .step .st-audio .au-no:first-child{margin-left:0}
body:not(.kids) .steps .step .tick:not(.on){font-size:15px !important;line-height:1.2;padding:9px 18px !important;border:0 !important;border-radius:999px;background:var(--ac) !important;background-image:none !important;color:#fff !important;font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--ac-text) !important}
body:not(.kids) .steps .step .tick:not(.on):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ac-text) !important}
body:not(.kids) .steps .step .tick.on{font-size:0 !important;width:48px;height:48px;min-width:48px;padding:0 !important;border:0 !important;border-radius:50%;background:url(../img/desk/B2_complete.png) center/contain no-repeat !important;box-shadow:none !important;color:transparent !important}
/* 시험 칸(파닉스 Daily Check) = 「시험 보기 ›」 글자 알약 (원장님 11-09 「앱으로 학습하는 게 아니라 재생 단추가 안 맞아」) · 「완료」 알약과 같은 모양 */
body:not(.kids) .steps .step .go-btn.test,body.kids .go-btn.test{font-size:15px !important;line-height:1.2;width:auto;height:auto;min-width:0;padding:9px 18px !important;border:0 !important;border-radius:999px;background:var(--ac) !important;background-image:none !important;color:#fff !important;font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--ac-text) !important}
body:not(.kids) .steps .step .go-btn.test:active,body.kids .go-btn.test:active{transform:translateY(3px);background-image:none !important;box-shadow:0 1px 0 var(--ac-text) !important}