@font-face{font-family:'Ssurround';src:url(img/font/ssurround.woff2) format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:'NSR';src:url(img/font/nsr_b.woff2) format('woff2');font-weight:100 600;font-display:swap}@font-face{font-family:'NSR';src:url(img/font/nsr_eb.woff2) format('woff2');font-weight:700 900;font-display:swap}

/* 디자인 코드 = 우리 B2C 허브 화면(hub_b2c/cache index·level·play.html) 그대로:
   크림 벽 #FAF0DB · 나무 바닥 #DCC592/#DCC592 · 칠판 #2f5d46 + 나무 테두리 #DCC592 · 크림 칸 #FAF0DB · 갈색 글자 #2A2A22
   흰 알약 버튼(테두리 #EFE2C2) · 단계 색 1단계 #1A7444 · 2단계 #9a4cc4 · 3단계 #ec5a2c · 창은 크림 바탕 + 굵은 나무 테두리 + 동그란 닫기 */
*{box-sizing:border-box;margin:0;padding:0}
:root{--wall:#FAF0DB;--floor:#DCC592;--floor2:#DCC592;--board:#2f5d46;--wood:#DCC592;--cream:#FAF0DB;--paper:#FFFFFF;
  --brown:#2A2A22;--line:#EFE2C2;--ink:#2A2A22;--sub:#4F5548;--chalk:#dfe9dc;
  --l1:#1A7444;--l2:#9a4cc4;--l3:#ec5a2c;--lv:#1A7444;--ok:#1A7444;--bad:#e0533d}
html,body{height:100%}
body{font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;color:var(--ink);font-size:15px;min-width:1024px;
  background:var(--wall)}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:46px;background:var(--floor);border-top:8px solid var(--floor2);z-index:-1}
button,input,select{font:inherit}
a{color:inherit}
.loading{padding:60px;text-align:center;font-size:20px;color:var(--sub)}

/* 버튼 = 허브 「곰선생 홈」 알약 · 진한 버튼 = 나무색 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:11px 22px;font-weight:900;cursor:pointer;
  background:var(--wood);color:#fff;text-decoration:none;white-space:nowrap;transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(120,70,20,.25)} .btn:active{transform:translateY(2px);box-shadow:none}
.btn.sub{background:#fff;color:var(--brown);border:3px solid var(--line)}
.btn.green{background:var(--board)} .btn.small{padding:6px 14px;font-size:13px} .btn.big{padding:15px 34px;font-size:19px}
.btn[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:800;background:#fff;border:2px solid var(--line);color:var(--brown);white-space:nowrap}
.chip.lv{color:#fff;border:0;background:var(--lv)}
.card{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:18px}
h1{font-size:26px;letter-spacing:-.8px;color:var(--brown)} h2{font-size:19px;letter-spacing:-.5px;margin-bottom:12px;color:var(--board)} h3{font-size:16px;margin-bottom:8px}
.muted{color:var(--sub);font-size:13px}
.row{display:flex;gap:16px;align-items:center} .grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ── 바깥(가입 전) 화면 ── */
.out{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 30px 80px}
.outbox{width:560px;background:var(--cream);border:12px solid var(--wood);border-radius:30px;padding:30px 38px;box-shadow:0 8px 0 rgba(120,70,20,.25)}
.outbox.wide{width:780px}
.landing{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;width:1040px}
.landing .logo{height:74px} .landing h1{font-size:38px;margin:18px 0 12px;line-height:1.25}
.landing .bear{width:100%;max-width:340px;justify-self:center}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.feat div{background:#FFFFFF;border:4px solid #fff;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-size:13px;font-weight:800;color:var(--brown);box-shadow:0 6px 0 rgba(150,100,40,.18);padding:10px}
.feat b{display:block;font-size:30px;margin-bottom:4px}
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps span{flex:1;height:8px;border-radius:9px;background:#EFE2C2} .steps span.on{background:var(--wood)}
.field{margin-bottom:14px} .field label{display:block;font-weight:900;font-size:13.5px;margin-bottom:6px;color:var(--board)}
.field input,.field select{width:100%;padding:11px 14px;border:3px solid var(--line);border-radius:14px;background:#fff}
.field input:focus,.field select:focus{outline:0;border-color:var(--wood)}
.field .err{color:var(--bad);font-size:12.5px;margin-top:4px;min-height:16px}
.agree{border:3px solid var(--line);border-radius:16px;background:#fff;padding:6px 14px}
.agree label{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #EFE2C2;cursor:pointer}
.agree label:last-child{border:0} .agree label.all{font-weight:900}
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.social button{border:0;border-radius:999px;padding:11px;font-weight:800;cursor:pointer}
.avatars{display:flex;gap:10px;flex-wrap:wrap}
.avatars button{width:62px;height:62px;border-radius:50%;border:4px solid #fff;background:#FFFFFF;font-size:32px;cursor:pointer;box-shadow:0 4px 0 rgba(150,100,40,.18)}
.avatars button.on{border-color:var(--wood);transform:scale(1.08)}
.lvpick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lvpick button{border:6px solid #fff;border-radius:50%;aspect-ratio:1;background:#FFFFFF;cursor:pointer;text-align:center;box-shadow:0 6px 0 rgba(150,100,40,.18);font-weight:900;color:var(--brown)}
.lvpick button b{display:block;font-size:44px;line-height:1} .lvpick button.on{border-color:var(--wood)}
.rec{font-size:12px;font-weight:900;color:#fff;background:var(--bad);border-radius:999px;padding:2px 8px;display:inline-block;margin-top:6px}

/* ── 프로필 고르기 = 허브 첫 화면의 흰 동그라미 ── */
.kids{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin:30px 0}
.kid{width:200px;text-align:center;cursor:pointer;background:none;border:0}
.kid .av{width:190px;height:190px;border-radius:50%;background:#FFFFFF;border:10px solid #fff;box-shadow:0 10px 0 rgba(150,100,40,.18);font-size:96px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative;transition:transform .12s}
.kid:hover .av{transform:translateY(-6px)} .kid b{font-size:21px;display:block;color:var(--brown)} .kid .muted{margin-top:3px}
.kid.add .av{font-size:64px;color:var(--wood);border:6px dashed var(--wood);background:transparent;box-shadow:none}

/* ── 안쪽 화면 틀: 왼쪽 메뉴 = 허브 칠판 탭(칠판 + 나무 테두리 · 고른 탭은 크림) ── */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--board);border-right:12px solid var(--wood);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.side .logo{height:46px;margin:0 6px 18px;align-self:flex-start;background:var(--cream);border-radius:12px;padding:5px 9px;height:54px}
.side a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;text-decoration:none;font-weight:900;font-size:16px;color:var(--chalk)}
.side a .ic{font-size:20px;width:24px;text-align:center}
.side a:hover{background:rgba(255,255,255,.08)} .side a.on{background:var(--cream);color:var(--board)}
.side .sep{height:2px;background:rgba(255,255,255,.12);margin:10px 6px}
.side .badge{margin-left:auto;background:var(--bad);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:12px 26px;background:var(--wall);border-bottom:3px solid var(--line);position:sticky;top:0;z-index:5}
.me{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.me .av{width:48px;height:48px;border-radius:50%;background:#FFFFFF;border:4px solid #fff;box-shadow:0 3px 0 rgba(150,100,40,.18);display:flex;align-items:center;justify-content:center;font-size:26px;position:relative}
.wear{position:absolute;top:-14px;right:-8px;font-size:20px}
.me b{font-size:16px;color:var(--brown)}
.xp{width:170px} .xp .bar{height:10px} .xp .muted{font-size:11.5px;margin-bottom:3px}
.bar{height:12px;border-radius:9px;background:#EFE2C2;overflow:hidden} .bar i{display:block;height:100%;background:var(--lv);border-radius:9px;transition:width .5s}
.stat{display:flex;align-items:center;gap:5px;font-weight:900;background:#fff;border:3px solid var(--line);border-radius:999px;padding:5px 13px;color:var(--brown)}
.page{padding:24px 26px 90px;max-width:1240px;width:100%}
.pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px} .pagehead .muted{margin-bottom:4px}

/* ── 홈 ── */
.hello{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--board);border:12px solid var(--wood);border-radius:26px;padding:14px 26px;margin-bottom:18px;color:#fff;box-shadow:0 8px 0 rgba(120,70,20,.25)}
.hello img{height:120px} .hello h1{font-size:28px;color:#fff} .hello .muted{color:var(--chalk)}
.today{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 게임 카드 = 허브 팝업 카드(흰 테두리 · 3:2 그림 · 색 알약 종류) */
.gcard{background:#fff;border:4px solid #fff;border-radius:20px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;position:relative;transition:transform .1s,border-color .1s;box-shadow:0 4px 0 rgba(150,100,40,.15)}
.gcard:hover{transform:translateY(-4px);border-color:var(--wood)}
.gcard .th{aspect-ratio:3/2;background:var(--board) center/cover no-repeat;position:relative}
.gcard .th .kind{position:absolute;left:8px;top:8px;background:var(--lv);color:#fff;border-radius:999px;font-size:11.5px;font-weight:800;padding:3px 9px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.gcard .th .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff;opacity:0;background:rgba(0,0,0,.25);transition:.12s}
.gcard:hover .th .play{opacity:1}
.gcard .bd{padding:9px 11px;display:flex;align-items:center;gap:6px}
.gcard .bd b{font-size:13.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.gcard.lock{pointer-events:none;opacity:.55} .gcard.lock .th{filter:grayscale(1) brightness(.85)}
.gcard.lock .th::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
.gcard.next{border-color:var(--wood);box-shadow:0 0 0 3px #f3c98d}
.gcard.next::before{content:"다음";position:absolute;right:8px;top:8px;z-index:2;background:var(--bad);color:#fff;font-size:11.5px;font-weight:900;border-radius:999px;padding:3px 9px}
.stars{color:#f0b400;letter-spacing:-1px;font-size:14px;white-space:nowrap} .stars .e{color:#EFE2C2}
.done-ck{color:var(--ok);font-weight:900;font-size:13px}
.mission{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)} .mission:last-child{border:0}
.mission .ic{font-size:26px;width:36px;text-align:center} .mission .bar{height:8px;margin-top:5px}
.days7{display:flex;gap:4px}
.days7 div{flex:1;min-width:0;text-align:center;font-size:12px;font-weight:800;color:var(--sub)}
.days7 i{display:flex;width:100%;max-width:38px;aspect-ratio:1;height:auto;margin:0 auto 4px;border-radius:50%;background:#EFE2C2;align-items:center;justify-content:center;font-style:normal;font-size:19px}
.days7 i.on{background:#ffd76a} .days7 i.today{box-shadow:inset 0 0 0 3px var(--wood)}   /* 10-30: 바깥 테두리(outline)는 카드 밖으로 나가 안쪽 테두리로 */

/* ── 학습 지도 = 허브 단계 화면(칠판 + 호 탭 + 크림 칸) ── */
.board{background:var(--board);border:14px solid var(--wood);border-radius:26px;padding:14px 18px 18px;box-shadow:0 8px 0 rgba(120,70,20,.25)}
.hotabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.hotabs a{text-decoration:none;font-weight:900;font-size:22px;border-radius:14px;padding:6px 10px;color:var(--chalk);display:flex;flex-direction:column;align-items:center;min-width:72px;flex:1}
.hotabs a small{font-size:10.5px;opacity:.8;font-weight:800}
.hotabs a.on{background:var(--cream);color:var(--board)}
.hotabs a.lock{opacity:.36}
.week{background:var(--cream);border-radius:18px;padding:14px 16px;margin-bottom:12px}
.week:last-child{margin-bottom:0}
.week.lock{opacity:.5}
.weekhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.weekhead .wk{border-radius:14px;color:#fff;padding:6px 14px;background:var(--lv);font-weight:900}
.weekhead .wk b{font-size:20px} .weekhead .wk span{font-size:13px;margin-left:6px}
.weekhead .bar{width:160px}
.sticker-mini{width:42px;height:42px;border-radius:50%;background:center/cover #EFE2C2;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.sticker-mini.off{filter:grayscale(1);opacity:.4}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.day{background:#fff;border-radius:14px;padding:10px}
.day .dh{font-weight:900;font-size:13px;color:var(--board);margin-bottom:8px;display:flex;justify-content:space-between}
.day .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.day .gcard{border-width:3px} .day .gcard .bd{padding:6px 8px} .day .gcard .bd b{font-size:12px}

/* ── 플레이 = 허브 play.html(칠판 바탕 · 나무 테두리 틀 · 흰 알약 돌아가기) ── */
.playwrap{height:100vh;display:grid;grid-template-rows:auto 1fr;background:var(--board);color:#fff}
.playbar{display:flex;align-items:center;gap:12px;padding:12px 18px}
.playbar .back{color:#fff;text-decoration:none;font-weight:800;font-size:14.5px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.24);border-radius:999px;padding:9px 17px;cursor:pointer}
.playbar .back:hover{background:rgba(255,255,255,.2)}
.playbar h1{font-size:17px;color:#fff} .playbar .k{font-size:12.5px;color:#cfe0c8;font-weight:800}
.playbar .live{margin-left:auto;font-size:12.5px;font-weight:800;background:rgba(0,0,0,.2);border-radius:999px;padding:6px 14px;display:flex;gap:10px;align-items:center}
.playbar .live i{font-style:normal;display:inline-block;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}
.playbar .live i.first_try{background:#5fd38d} .playbar .live i.retry{background:#ffd34d} .playbar .live i.missed{background:#ff7a66} .playbar .live i.viewed{background:#9ad0ff}
.stage{display:flex;align-items:center;justify-content:center;padding:0 16px 16px;min-height:0}
.frame{width:min(100%,calc((100vh - 96px)*16/9));aspect-ratio:16/9;border:8px solid var(--wood);border-radius:22px;overflow:hidden;background:#000;box-shadow:0 16px 0 rgba(0,0,0,.28),0 26px 56px rgba(0,0,0,.5)}
.frame iframe,.frame video{width:100%;height:100%;border:0;display:block;background:#fff}
.frame video{background:#000}

/* ── 결과·알림 창 = 허브 팝업(크림 + 12px 나무 테두리 + 동그란 닫기) ── */
.modal{position:fixed;inset:0;background:rgba(40,28,12,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.modal[hidden]{display:none}
.mbox{position:relative;background:var(--cream);border:12px solid var(--wood);border-radius:30px;padding:26px 34px;width:620px;max-height:92vh;overflow:auto;text-align:center;animation:pop .25s}
.mbox h1{margin-bottom:6px;color:var(--board);font-size:30px}
.mbox .x{position:absolute;right:16px;top:14px;width:46px;height:46px;border-radius:50%;border:0;font-size:22px;font-weight:900;color:#fff;background:var(--wood);cursor:pointer}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.bigstars{font-size:58px;letter-spacing:4px;margin:8px 0;color:#f0b400} .bigstars .e{color:#EFE2C2}
.bigstars span{display:inline-block;animation:star .4s backwards}
@keyframes star{from{transform:scale(0) rotate(-90deg)}}
.gains{display:flex;flex-direction:column;gap:7px;margin:14px 0;text-align:left}
.gain{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:800}
.gain .v{margin-left:auto;color:var(--brown);white-space:nowrap}
.gain.big{background:#fff3d0;border-color:#f0c35a}
.rounds{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.rounds span{font-size:12px;font-weight:800;border-radius:999px;padding:3px 9px;background:#eee}
.rounds .first_try{background:#d5f3e0;color:#0d7a3c} .rounds .retry{background:#fff1c2;color:#8a6200} .rounds .missed{background:#ffd9d2;color:#b2321f}
.mbtns{display:flex;gap:10px;justify-content:center;margin-top:16px}

/* ── 점수·진도 ── */
.kpi{background:#fff;border:3px solid var(--line);border-radius:18px;padding:14px 16px}
.kpi .v{font-size:28px;font-weight:900;color:var(--board);letter-spacing:-1px} .kpi .l{font-size:12.5px;color:var(--sub);font-weight:800}
table.t{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border-radius:12px;overflow:hidden}
.t th{background:var(--cream);color:var(--board);font-weight:900;text-align:left;padding:9px 10px;font-size:12.5px}
.t td{padding:8px 10px;border-top:1px solid #EFE2C2;vertical-align:middle}
.heat{display:grid;grid-template-columns:60px repeat(4,1fr) 70px;gap:5px;font-size:12.5px;font-weight:800;align-items:center}
.heat .c{border-radius:8px;height:30px;display:flex;align-items:center;justify-content:center;background:#EFE2C2;color:#4F5548}
.heat .h{color:var(--sub);text-align:center}
.pct{font-weight:900} .pct.g{color:var(--ok)} .pct.m{color:#8A6200} .pct.b{color:var(--bad)}
.hbars .r{display:grid;grid-template-columns:130px 1fr 54px;gap:10px;align-items:center;margin-bottom:9px;font-size:13px;font-weight:800}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{background:#fff;border:3px solid var(--line);border-radius:14px;padding:7px 12px;font-weight:900;display:flex;gap:7px;align-items:center}
.word small{color:var(--bad);font-size:11.5px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{text-decoration:none;font-weight:900;border-radius:999px;padding:7px 16px;background:#fff;border:3px solid var(--line);color:var(--brown)}
.tabs a.on{background:var(--board);color:#fff;border-color:var(--board)}

/* ── 보상 ── */
.rules td:first-child{font-weight:900;white-space:nowrap}
.claim{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--line);border-radius:16px;padding:11px 14px;margin-bottom:8px}
.claim .ic{font-size:28px} .claim.ready{border-color:#f0c35a;background:#fff8df}
.sbook{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.st{text-align:center;font-size:11px;font-weight:800;color:var(--sub)}
.st i{display:block;aspect-ratio:1;border-radius:50%;background:center/cover #EFE2C2;border:4px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.12);margin-bottom:4px}
.st.off i{filter:grayscale(1);opacity:.35}
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.bdg{text-align:center;background:#fff;border:3px solid var(--line);border-radius:16px;padding:12px 6px;font-size:12px;font-weight:800}
.bdg b{display:block;font-size:34px;margin-bottom:4px} .bdg.off{opacity:.38;filter:grayscale(1)} .bdg .muted{font-size:11px;margin-top:3px}
.shop{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.item{background:#fff;border:3px solid var(--line);border-radius:16px;padding:12px;text-align:center}
.item b{display:block;font-size:40px} .item.wearing{border-color:var(--ok);background:#E6F4EF}

/* ── 회원 정보 ── */
.set{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #EFE2C2} .set:last-child{border:0}
.set .k{width:130px;font-weight:900;color:var(--board)} .set .v{flex:1}
.switch{width:46px;height:26px;border-radius:99px;background:#EFE2C2;position:relative;cursor:pointer;border:0}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.switch.on{background:var(--ok)} .switch.on::after{left:23px}
.kidrow{display:flex;align-items:center;gap:12px;padding:10px;border:3px solid var(--line);border-radius:16px;background:#fff;margin-bottom:8px}
.kidrow .av{font-size:34px}
.gate{max-width:440px;margin:60px auto;text-align:center}
.gate input{width:120px;text-align:center;font-size:24px;padding:8px;border:3px solid var(--line);border-radius:14px;margin:14px 0}
.cert{background:#FFFFFF;border:12px double var(--wood);border-radius:12px;padding:40px;text-align:center}
.cert h1{font-size:40px;margin:10px 0}

/* ── 페이지 목록 · 알림 ── */
.pagesbtn{position:fixed;right:16px;bottom:58px;z-index:40;background:#fff;color:var(--brown);border:3px solid var(--line);text-decoration:none;font-weight:900;font-size:13px;border-radius:999px;padding:8px 16px}
.toast{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-20px);opacity:0;pointer-events:none;transition:.18s;background:var(--paper);color:var(--brown);border:5px solid var(--wood);border-radius:22px;padding:12px 26px;font-weight:900;font-size:17px;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%)}
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plist a{display:block;background:#fff;border:3px solid var(--line);border-radius:16px;padding:12px 14px;text-decoration:none}
.plist a:hover{border-color:var(--wood)}
.plist a b{display:block;font-size:15px;color:var(--board)} .plist a span{font-size:12.5px;color:var(--sub)}
.plist .n{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--board);color:#fff;font-size:12px;text-align:center;line-height:22px;margin-right:6px}

/* ── 장식 그림(디자인 자산 library/20261029_sorted/characters · 글자·칸과 겹치지 않게 칸 밖·줄 안에만) ── */
.deco{display:block;pointer-events:none;user-select:none}
.heroimg{display:flex;align-items:flex-end;justify-content:center;gap:0}
.heroimg .teacher{height:380px} .heroimg .bear2{height:220px;margin-left:-6px}
.sech{display:flex;align-items:center;justify-content:center;gap:12px;font-size:24px}
.sech .deco{height:64px}
.decobox{display:flex;align-items:flex-end;gap:22px}
.decobox .dl,.decobox .dr{height:250px;flex:0 0 auto}
.decobox .dr{height:200px}
.cornerL,.cornerR{position:fixed;bottom:46px;height:300px;z-index:-1}
.cornerL{left:3%} .cornerR{right:4%;height:210px}
.pagehead .headdeco{height:92px;margin-left:auto;margin-bottom:-6px}
.headdeco.sm{height:72px;margin-left:0}
.hello img{height:140px;margin:-6px 0 -14px}
.mdeco .deco{height:130px;margin:0 auto 4px}
.certd{height:130px}
@media (max-width:1300px){.cornerL,.cornerR{display:none}}
/* 10-30 화면 확인 뒤 손질: 나무 바닥은 문서 맨 아래(글자 위로 지나가지 않게) · 소개 동그라미 작게 */
body{position:relative;min-height:100vh;padding-bottom:46px}
body::after{position:absolute}
.feat{grid-template-columns:repeat(3,130px);gap:18px}
.feat div{width:130px}
.pagesbtn{bottom:12px;opacity:.85}
html{height:auto} body{height:auto}
.shell{background:linear-gradient(90deg,var(--board) 218px,var(--wood) 218px 230px,transparent 230px)}
.shell ~ .pagesbtn{display:none}
.side .demo{font-size:13px;opacity:.7}

/* ════════ 폰·패드(10-30 감독님 「외부에서는 패드나 휴대폰으로」) ════════
   ~1100px(패드 세로·폰 가로) = 왼쪽 메뉴를 그림만 · ~760px(폰 세로) = 아래 메뉴 · 게임은 폰 세로면 「가로로 돌려 주세요」 */
body{min-width:0}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.tabbar,.rotate{display:none}
.plist.more{grid-template-columns:1fr}

@media (max-width:1100px){
  .shell{grid-template-columns:78px 1fr;background:linear-gradient(90deg,var(--board) 68px,var(--wood) 68px 78px,transparent 78px)}
  .side{border-right-width:10px;padding:14px 8px;align-items:center}
  .side .logo,.side .demo,.side .sep{display:none}
  .side a{font-size:0;padding:11px;justify-content:center;position:relative}
  .side a .ic{font-size:24px;width:auto}
  .side .badge{position:absolute;top:2px;right:0;font-size:11px}
  .top{padding:10px 16px;gap:10px}
  .xp{width:130px}
  .page{padding:18px 18px 80px}
  .badges{grid-template-columns:repeat(4,1fr)} .shop{grid-template-columns:repeat(3,1fr)}
  .landing{grid-template-columns:1fr 280px;gap:18px} .landing h1{font-size:32px}
  .heroimg .teacher{height:300px} .heroimg .bear2{height:170px}
  .cornerL,.cornerR{display:none}
}

@media (max-width:760px){
  .shell{grid-template-columns:1fr;background:none}
  .side{display:none}
  .main{padding-bottom:68px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;z-index:20;background:var(--cream);border-top:5px solid var(--wood);padding:0 4px env(safe-area-inset-bottom)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;font-size:11.5px;font-weight:900;color:var(--sub)}
  .tabbar a span{font-size:22px;position:relative;line-height:1.1}
  .tabbar a i{position:absolute;top:-4px;right:-12px;background:var(--bad);color:#fff;font-style:normal;font-size:10px;border-radius:999px;padding:0 5px}
  .tabbar a.on{color:var(--board)} .tabbar a.on span{transform:scale(1.12)}
  .top{padding:8px 12px;gap:8px}
  .top .chip:not(.lv),.top .xp,.top .stat[title^="모은 별"]{display:none}
  .me .av{width:40px;height:40px;font-size:22px} .me b{font-size:14px}
  .stat{padding:4px 9px;font-size:13px}
  .page{padding:14px 12px 24px}
  .pagehead{flex-wrap:wrap;gap:6px 10px;margin-bottom:12px} .pagehead h1{font-size:22px}
  .pagehead .headdeco{height:58px}
  .card{padding:14px;border-radius:18px}
  .grid2,.grid3{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr;gap:10px}
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .sbook[style]{grid-template-columns:repeat(4,minmax(0,1fr)) !important;flex:1}
  .kpi .v{font-size:22px}
  .hello{grid-template-columns:auto 1fr;gap:10px 14px;padding:12px 14px;border-width:8px}
  .hello img{height:96px;margin:0} .hello h1{font-size:18px} .hello .btn{grid-column:1/-1}
  .today{grid-template-columns:1fr 1fr;gap:10px}
  .board{padding:10px;border-width:8px}
  .hotabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .hotabs a{min-width:54px;font-size:18px;flex:0 0 auto}
  .weekhead{flex-wrap:wrap;gap:8px} .weekhead .bar{width:90px}
  .days{grid-template-columns:1fr}
  .day .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heat{grid-template-columns:38px repeat(4,1fr) 30px;font-size:11px;gap:4px} .heat .c{height:26px}
  .hbars .r{grid-template-columns:96px 1fr 42px;font-size:12px}
  .badges{grid-template-columns:repeat(3,1fr);gap:8px} .shop{grid-template-columns:repeat(3,1fr);gap:8px}
  .claim{flex-wrap:wrap;gap:8px} .claim .bar{max-width:none !important}
  .t{font-size:12px} .t td,.t th{padding:6px 7px}
  .mbox{width:94vw;padding:18px 14px;border-width:8px}
  .mbox h1{font-size:23px} .bigstars{font-size:44px} .mdeco .deco{height:96px}
  .mbtns{flex-wrap:wrap}
  .row{flex-wrap:wrap}
  .set{flex-wrap:wrap} .set .k{width:100%}
  .out{padding:16px 12px 70px}
  .outbox,.outbox.wide{width:100%;padding:20px 16px;border-width:8px}
  .decobox .dl,.decobox .dr{display:none} .decobox{width:100%}
  .landing{grid-template-columns:1fr;text-align:center}
  .landing .logo{height:56px;margin:0 auto} .landing h1{font-size:27px} .landing p{font-size:14px !important}
  .landing .row{justify-content:center}
  .heroimg .teacher{height:220px} .heroimg .bear2{height:130px}
  .feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .feat div{width:auto;font-size:11.5px;padding:6px} .feat b{font-size:24px}
  .sech{font-size:20px} .sech .deco{height:50px}
  .lvpick{gap:8px} .lvpick button b{font-size:32px} .lvpick button{font-size:12px;border-width:4px} .lvpick .muted{font-size:10.5px}
  .social button{font-size:12.5px;padding:10px 4px}
  .kids{gap:18px} .kid{width:140px} .kid .av{width:120px;height:120px;font-size:62px;border-width:7px}
  .btn.big{padding:13px 24px;font-size:17px}
  .plist{grid-template-columns:1fr}
  .cert{padding:20px 12px} .cert h1{font-size:30px} .certd{height:80px}
  .pagesbtn{bottom:8px;right:8px}
}

/* 게임 화면: 폰 가로(높이 낮음) = 위 띠를 얇게 · 폰 세로 = 가로로 돌려 달라는 안내 */
@media (max-height:520px){
  .playbar{padding:5px 10px;gap:8px} .playbar .k,.playbar .chip{display:none} .playbar h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .playbar .back{padding:5px 12px;font-size:13px} .playbar .live{padding:4px 10px} .playbar .live span{display:none}
  .stage{padding:0 8px 8px}
  .frame{width:min(100%,calc((100vh - 52px)*16/9));border-width:4px;border-radius:12px}
}
@media (max-width:760px) and (orientation:portrait){
  /* 11-03 감독님: 게임·교재가 폰 세로를 지원하므로 「가로로 돌려 주세요」 안내를 빼고 세로 화면을 꽉 채움 */
  .playwrap{height:100dvh}
  .playbar .k,.playbar .chip,.playbar .live{display:none} .playbar h1{font-size:15px}
  .stage{padding:0 6px 6px}
  .frame{width:100%;height:100%;aspect-ratio:auto;border-width:4px;border-radius:12px}
}
/* 폰 세로 화면 확인 뒤 손질(10-30) */
@media (max-width:1100px){ .landing{width:100%} }
@media (max-width:760px){
  .landing{width:100%}
  .feat div{aspect-ratio:1;border-width:3px}
  .set .k[style]{width:100% !important}
  .lvpick button{aspect-ratio:auto;border-radius:18px;padding:12px 4px}
  .t{min-width:620px}
  .kidrow{flex-wrap:wrap} .kidrow .grow{min-width:60%}
}
.card,.kpi,[style*="grid-template-columns"] > *{min-width:0}
@media (max-width:760px){ .pagesbtn{display:none !important} }
@media (max-width:1100px){.pagehead{flex-wrap:wrap}}
/* 폰 가로(높이 낮음) 결과 창: 그림·칸 줄 빼고 단추는 늘 보이게 */
@media (max-height:520px){
  .mbox{width:min(640px,94vw);padding:12px 18px;border-width:7px;max-height:94vh}
  .mdeco,.rounds{display:none} .mbox h1{font-size:20px;margin:0} .bigstars{font-size:32px;margin:0}
  .gains{margin:8px 0;gap:4px} .gain{padding:4px 10px;font-size:13px}
  .mbtns{position:sticky;bottom:-12px;background:var(--cream);padding:8px 0 4px;margin-top:6px;flex-wrap:wrap}
  .mbtns .btn{padding:8px 14px;font-size:13px}
}
/* 다른 앱 미리보기 창 안내 줄(흐름 안 · 내용을 가리지 않음) · 360px 폰 꾸미기 칸 */
.inapp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--board);color:#fff;font-weight:800;font-size:13.5px;padding:8px 12px}
.inapp[hidden]{display:none} .inapp span{flex:1;min-width:160px}
.inapp .x{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:50%;width:30px;height:30px;font-weight:900;cursor:pointer}
.shop{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){ .shop{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .shop,.badges{grid-template-columns:repeat(3,minmax(0,1fr))} .item{padding:10px 4px} .item b{font-size:32px} }

/* ── SNS 로그인 · 이용권 · 결제(10-30) ── */
.orline{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:var(--sub);font-size:12.5px;font-weight:800}
.orline::before,.orline::after{content:"";flex:1;height:2px;background:var(--line)}
.sns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sns button{border:0;border-radius:12px;padding:11px 8px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}
.sns button b{font-size:16px}
.snsdot{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-size:12px;font-weight:900;vertical-align:middle}
.simnote{background:#eef6ff;border:2px dashed #8fb6e3;color:#2a4d73;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;margin:12px 0;line-height:1.6}
.chip.trial{background:#fff3d0;border-color:#f0c35a;color:#8a5a00;text-decoration:none}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{position:relative;background:#fff;border:3px solid var(--line);border-radius:22px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:6px}
.plan h3{font-size:18px;color:var(--board);margin:0} .plan .price{font-size:30px;font-weight:900;color:var(--brown);letter-spacing:-1px}
.plan ul{margin:8px 0 12px 18px;font-size:13px;line-height:1.8;color:var(--ink);flex:1} .plan .btn{margin-top:auto}
.plan.best{border-color:var(--wood);box-shadow:0 8px 0 rgba(120,70,20,.18)} .plan.cur{border-color:var(--ok)}
.pbadge{position:absolute;top:-13px;left:16px;background:var(--bad);color:#fff;font-size:12px;font-weight:900;border-radius:999px;padding:3px 11px}
.checkout .price{font-size:26px;font-weight:900;color:var(--brown)}
.paym{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.paym button{background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px 4px;font-weight:800;font-size:12.5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.paym button b{font-size:22px} .paym button.on{border-color:var(--wood);background:#fff8df}
@media (max-width:760px){ .plans{grid-template-columns:1fr} .paym{grid-template-columns:repeat(3,minmax(0,1fr))} .sns{grid-template-columns:1fr 1fr} }
/* 약관·방침(10-30) */
.terms h3{font-size:15px;color:var(--board);margin:16px 0 6px} .terms p{line-height:1.8;font-size:14px;margin:6px 0} .terms ul{margin:4px 0 8px 20px;line-height:1.8;font-size:14px}
.terms .t{margin:8px 0} .terms .t td{white-space:normal}
.footer a{color:var(--sub)}
@media (max-width:760px){ .terms .t{min-width:0} .terms .t td,.terms .t th{font-size:12px} }
/* 10-30 자동 업데이트 띠(쇼케이스처럼 위 가운데) */
.upd{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:70;white-space:nowrap;background:var(--board,#2f5d46);color:#fff;font-weight:900;font-size:15px;padding:9px 18px;border-radius:999px;border:3px solid var(--wood,#DCC592);box-shadow:0 4px 14px rgba(40,25,10,.3);display:flex;align-items:center;gap:8px}
.upd[hidden]{display:none}.upd b{color:#ffe08a}
.upd .spin{width:14px;height:14px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:updspin .8s linear infinite}
@keyframes updspin{to{transform:rotate(360deg)}}
@media (max-width:420px){.upd{font-size:13px;padding:7px 14px}}
/* 10-30 곰수리 함께: 브랜드 「곰선생」 · 과목 바꾸기 · 상품 카드 · 과목별 단계 · 곰선생 책방 */
.brand{--bh:54px;display:inline-flex;align-items:center;gap:calc(var(--bh)*.12);height:var(--bh);text-decoration:none}
.brand img{height:100%;width:auto}.brand b{font-size:calc(var(--bh)*.56);font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand b i{font-style:normal;color:#d9542b}.brand b i+i{color:#1A7444}
.side .logo{display:block;background:var(--cream);border-radius:12px;padding:5px 10px;margin:0 6px 18px;align-self:flex-start;height:auto}
.side .logo .brand{--bh:44px}
.subj{display:inline-flex;background:#FFFFFF;border:3px solid var(--line);border-radius:999px;padding:3px;gap:3px;flex:none}
.subj button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-weight:900;font-size:14px;color:var(--brown);white-space:nowrap}
.subj button span{font-size:11px;background:var(--sc);color:#fff;border-radius:7px;padding:2px 5px;line-height:1.2}
.subj button.on{background:var(--sc);color:#fff}.subj button.on span{background:#fff;color:var(--sc)}
.subh{display:flex;align-items:center;gap:8px;color:var(--sc);font-size:19px;margin:0 0 10px}
.prods .prod{all:unset;position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;border-top:8px solid var(--sc)}
.prods .prod.cur{outline:5px solid var(--sc);outline-offset:-2px}
.prods .pic{font-weight:900;font-size:20px;color:#fff;background:var(--sc);border-radius:14px;padding:6px 12px;margin:4px 0 8px}
.prods .price small{font-size:14px;color:#4F5548;font-weight:800}
.lvsub{border:3px solid var(--sc);border-radius:20px;padding:14px;margin-bottom:14px;background:#FFFFFF}
.lvsub h3{display:flex;align-items:center;gap:8px;color:var(--sc);margin-bottom:10px}
.sbadge{display:inline-block;font-size:11px;font-weight:900;color:#fff;background:var(--sc,var(--board));border-radius:7px;padding:2px 6px;line-height:1.3}
.sline{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 8px;margin-top:6px;font-size:13px}
.sline .bar{grid-column:1/-1;height:7px}.sline .bar i{background:var(--sc)}.sline .muted{grid-column:1/-1;font-size:12px}
.bookshop{display:flex;align-items:center;gap:14px;margin-top:16px;text-decoration:none;border-color:#03c75a}
.bookshop .bi{font-size:36px}.bookshop b{color:var(--board)}
@media (max-width:760px){
  .top .subj button{padding:5px 9px;font-size:13px}.top .subj button span{display:none}
  .brand b{font-size:calc(var(--bh)*.5)}.bookshop{flex-wrap:wrap}.bookshop .btn{width:100%;text-align:center}
}
@media (max-width:1100px){ .side .logo{display:none} }
@media (max-width:420px){ .top .me b{display:none} }
.subj button .dot{font-style:normal;background:var(--bad);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;margin-left:2px}
.top .stat{white-space:nowrap}
/* 10-30 감독님: 곰선생 한글 = 원래 허브 디자인(칠판 #2f5d46 · 나무 테 #DCC592 · 바탕 #FAF0DB — 덧칠 없음)
   곰수리 = 렛미플라이 쇼케이스 색(크라프트 종이 #DCC592 점무늬 #DCC592 · 폴라로이드 #FFFFFF · 제목 #2A2A22 · 글 #2A2A22/#4F5548 · 이름표 #fff3c9)
   + 과목 색 = 「이어서 하기」 갈색 #2A2A22(과목 단추·단계 표시·「다음」 카드 테·진도 막대 · 10-30 감독님) · 마스킹테이프 장식은 없음 */
@media (max-width:420px){ .top{gap:6px} .top .stat{padding:4px 8px;font-size:13px} .top .subj button{padding:5px 8px} .top .subj button .dot{padding:0 4px} }   /* 10-30: 다른 과목 보상 숫자가 붙어도 윗줄이 넘치지 않게(넘치면 폰이 화면을 축소해 아래 탭 글자가 잘림) */
@media (max-width:380px){ .top .chip.lv{display:none} }   /* 아주 좁은 폰: 단계 표시는 홈 글에 있으니 윗줄에서 뺌 */
/* 10-30: 폰 글자 크기를 키운 폰에서도 윗줄이 화면 밖으로 넘치지 않게(넘치면 폰이 화면을 줄여 아래 탭 글자가 잘림) */
@media (max-width:460px){ .top .chip.lv{display:none} .top{gap:6px;overflow:hidden} .top .stat{padding:4px 8px} .top .subj button{padding:5px 9px} }

/* 10-31 홈 내 친구 카드 */
.petcard{margin-bottom:18px;border-radius:22px;overflow:hidden;box-shadow:0 6px 14px rgba(20,15,10,.15)}
.petcard iframe{display:block;width:100%;height:240px;border:0;background:#fde3c2}
@media (max-width:700px){.petcard iframe{height:230px}}

/* 10-31 별 동전 */
.coin{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23f5b81c'/%3E%3Ccircle cx='50' cy='50' r='32' fill='%23ffd23d' stroke='%23e8a60c' stroke-width='4'/%3E%3Cpath d='M50 28 l7 14 15 2 -11 10 3 15 -14-7 -14 7 3-15 -11-10 15-2Z' fill='%23fff6c9'/%3E%3C/svg%3E") center/contain no-repeat}
/* 10-31 밤: 캐릭터에 꾸밈 겹쳐 입기(자리마다 하나) + 홈 「오늘의 미션 = 내 친구 꾸며 주기」 */
.av{position:relative}
.av .w{position:absolute;line-height:1;pointer-events:none}
.av .w-head{top:-.42em;left:50%;transform:translateX(-50%);font-size:.62em}
.av .w-face{top:30%;left:50%;transform:translateX(-50%);font-size:.5em}
.av .w-neck{bottom:-.08em;left:50%;transform:translateX(-50%);font-size:.42em}
.av .w-body{bottom:-.22em;right:-.22em;font-size:.48em}
.av .w-feet{bottom:-.28em;left:-.18em;font-size:.42em}
.av .w-back{top:18%;right:-.38em;font-size:.45em}
.wish{margin-bottom:18px}
.wish .wishhead{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.wish .wishhead .me .av{border-width:6px}
.wish .say{font-size:18px;margin-top:6px;color:var(--brown)}
.wish .mission .grow>div:first-child{font-size:15px;line-height:1.45}
@media (max-width:600px){.wish .wishhead{flex-wrap:wrap;gap:12px}.wish .wishhead .btn{width:100%}}
/* 미션 들어 보기 단추 */
.spk{flex:none;width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:#ffe9b8;box-shadow:0 3px 0 rgba(150,100,40,.18);font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-right:6px;vertical-align:middle}
.spk:active{transform:scale(.92)}
.wish .say{display:flex;align-items:center;gap:6px}
.item .gm{font-size:12px;color:var(--ok);font-weight:700;margin-top:4px}
/* 등급 = 태권도 띠(캐릭터 옆) */
.belt{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:#fff;border:3px solid #fff;border-radius:999px;padding:3px 10px 3px 6px;box-shadow:0 3px 0 rgba(150,100,40,.15);font-weight:800;font-size:13px;color:var(--brown);white-space:nowrap}
.belt i{width:30px;height:12px;border-radius:3px;background:var(--bc);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18);position:relative}
.belt i::after{content:"";position:absolute;left:50%;top:-3px;width:8px;height:18px;margin-left:-4px;border-radius:2px;background:var(--bc);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.22)}
.belt b{font-size:16px;line-height:1}
@media (max-width:600px){.belt>span:not(.rkb){display:none}.belt{padding:3px 6px}}
.belts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.belts .bl{position:relative;background:#FFFFFF;border:3px solid var(--line);border-radius:14px;padding:12px 12px 10px;opacity:.55}
.belts .bl.on{opacity:1} .belts .bl.cur{border-color:var(--ok);background:#E6F4EF}
.belts .bl i{display:block;width:60px;height:16px;border-radius:4px;background:var(--bc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);margin-bottom:8px}
.belts .bl b{display:block;font-size:16px;color:var(--brown)} .belts .bl span{font-size:13px;color:var(--muted,#8a7a66)}
.belts .bl em{position:absolute;right:8px;top:8px;font-style:normal;font-size:12px;font-weight:800;background:var(--ok);color:#fff;border-radius:999px;padding:2px 8px} .belts .bl em.nx{background:#f0a24f}
/* 상장 화면 */
.award{text-align:center;padding:10px 6px;background:radial-gradient(circle at 50% 0,#fff6d8,#FFFFFF 60%);border:6px double #d8b25a;border-radius:16px}
.award .aw-ic{font-size:72px;line-height:1.1}
.award h1{font-size:30px;letter-spacing:6px;margin:6px 0 10px;color:var(--brown)}
.award p{font-size:17px;margin:6px 0}
.belt i{background:var(--bc)} .belts .bl i{background:var(--bc)}
.top{min-width:0} .top .belt{flex:none}
/* 10-31 밤: 띠가 들어간 위 막대가 1280 화면에서 12px 넘쳐서 — 곰 레벨 글을 줄이고 막대가 줄어들게 */
.top .xp{min-width:0;flex-shrink:1} .top .grow{min-width:0}
@media (max-width:1400px){.top .xp .muted{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}}
@media (max-width:1100px){.top .xp{display:none}}
/* 트로피 */
.award .aw-ic{position:relative;display:inline-block;font-size:90px}
.award .aw-ic span{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:30px}
.trophies .tro{position:relative;display:inline-block;font-size:44px}
.trophies .tro i{position:absolute;left:50%;top:16%;transform:translateX(-50%);font-size:16px;font-style:normal}
/* 등급 배지(10등급 × 아래·위) */
.belt em{font-style:normal;font-size:16px;line-height:1}
.belt span small{font-size:11px;color:#e0a020;margin-left:3px}
.belts .bl .ud{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.belts .bl .ud u{text-decoration:none;font-size:11px;background:#EFE2C2;color:#4F5548;border-radius:999px;padding:1px 7px}
.belts .bl .ud u.ok{background:#fff1c4;color:#9a6a00;font-weight:800}
/* Lv 배지(그림이 있으면 그림, 없으면 띠 색 동그라미 + 숫자) */
.lvb{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);flex:none;vertical-align:middle}
.lvb b{font-size:11px;font-weight:900;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.45);line-height:1}
.lvb img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain}
.lvb img~b{display:none}
.belt{padding:3px 10px 3px 4px} .belt i{display:none}
.lvt tr.cur td{background:#E6F4EF;font-weight:800} .lvt tr.ok td{color:#4F5548} .lvt td{white-space:nowrap}
@media (max-width:600px){.top .stat[title^="모은 별"]{display:none}}
@media (max-width:1400px){.top .chip.lv,.top .chip:not(.trial){display:none}}
/* 계급 배지(임시) — 은·금 바탕 + 단계 표시 개수 */
.rkb{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;letter-spacing:-.15em;line-height:1;flex:none;vertical-align:middle;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),0 2px 0 rgba(0,0,0,.12)}
.rkb.silver{background:radial-gradient(circle at 35% 30%,#ffffff,#cfd6dd 70%,#aeb7c0)}
.rkb.gold{background:radial-gradient(circle at 35% 30%,#fff6c8,#f2c14e 65%,#d79a1c)}
.lvt tr.sep td{background:#FAF0DB;font-weight:800;color:var(--brown)}
/* 체스 말 계급 배지(임시: 재질 바탕 + 체스 기호 · 그림 img/rank/ 이 있으면 그림) */
.rkb{position:relative;overflow:visible}
.rkb i{font-style:normal;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.rkb img{position:absolute;inset:-10%;width:120%;height:120%;object-fit:contain} .rkb img~i{display:none}
.rkb.wood{background:radial-gradient(circle at 35% 30%,#f3d3a4,#DCC592 65%,#DCC592);color:#2A2A22}
.rkb.silver{color:#4a5560} .rkb.gold{color:#7a4e00}
.rkb.gem{background:radial-gradient(circle at 35% 30%,#fff,#b9e6ff 45%,#9a7bff 75%,#ff7bd0);color:#7a2a8a}
.avatars.gen button{width:auto;padding:8px 16px;font-size:16px}

/* 10-31 밤 캐릭터 그림 · 꾸밈 그림 · 트로피·배지 그림 */
.av.pic{overflow:hidden;font-size:0!important;display:inline-block;vertical-align:middle}
.av.pic .fig{position:absolute;left:50%;bottom:2%;height:80%;aspect-ratio:2/3;transform:translateX(-50%)}
.av.pic.sm .fig{height:185%;bottom:auto;top:4%}
.av.pic .fig img{position:absolute;pointer-events:none}
.av.pic .fig .ch{left:0;top:0;width:100%;height:100%;z-index:1}
.av.pic .fig .wo{height:auto;max-width:none}
.av.pic .fig img[style*="height:"]{object-fit:fill}
.item b .wi{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 4px}
.trophies .tro img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto}
.aw-ic img{width:140px;height:140px;object-fit:contain}
.avatars .kidimg{width:100%;height:100%;object-fit:cover;object-position:50% 8%;border-radius:50%}
.mission b .wi,.wish b .wi{width:1.6em;height:1.6em;object-fit:contain;vertical-align:-.45em;margin-right:2px}

.pickav{justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px}.pickav button{width:96px;height:96px}
.av.pic .fig .clip{position:absolute;inset:0;-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.av.pic .fig .ch.ears{z-index:7}
.av.pic .fig .wo{filter:drop-shadow(0 1.5px 1.5px rgba(60,40,20,.28))}

/* 레벨 테스트 */
.lt .ltq{position:relative;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:3px solid var(--line);border-radius:18px;height:clamp(160px,32vh,260px)}
.lt .ltq img{max-height:90%;max-width:80%;object-fit:contain}
.lt .ltq .spk.big{position:absolute;right:12px;bottom:12px;width:56px;height:56px;font-size:26px}
.lt .ltopts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.lt .ltopts.long{grid-template-columns:1fr}
.lt .ltopts button{font:inherit;font-size:clamp(20px,4.6vw,30px);font-weight:800;padding:14px 8px;border:4px solid var(--line);border-radius:16px;background:#fff;color:var(--brown,#2A2A22);cursor:pointer}
.lt .ltopts.long button{font-size:clamp(17px,3.6vw,22px)}
.lt .ltopts button:active{transform:scale(.97)}

.lt .ltsay{font-size:clamp(17px,3.8vw,22px);font-weight:700;margin:0 0 10px;color:var(--brown,#2A2A22)}
.lt .lts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:10px 64px 10px 10px;max-width:100%}
.lt .lts.grid{max-width:520px}
.lt .lts .grp{display:flex;flex-wrap:wrap;gap:4px;max-width:200px;justify-content:center;padding:8px;border:3px dashed var(--line);border-radius:14px}
.lt .lts .plus,.lt .lts .qm{font-size:clamp(30px,7vw,48px);color:var(--brown,#2A2A22);margin:0 8px}
.lt .lts .big{font-size:clamp(34px,8vw,64px);color:var(--brown,#2A2A22);letter-spacing:.02em}
.lt .lts img.si{max-width:none}
.lt .lts.nowrap{flex-wrap:nowrap}
/* 오늘의 미션 정리판(11-01 밤) */
.wish .whead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.wish .whead .me{flex:none}
.wish .whead .me .av{border-width:5px}
.wish .wtitle{min-width:0;display:flex;flex-direction:column;gap:2px}
.wish .wtitle h2{margin:0;font-size:22px;line-height:1.2}
.wish .wtitle .muted{font-size:13px}
.wish .wgoal{font-size:14px;color:var(--brown);margin-top:2px}
.wish .wtoday{display:flex;align-items:center;gap:12px;background:#E6F4EF;border:2px solid #bfe8cd;border-radius:16px;padding:10px 14px;margin-bottom:6px}
.wish .wtoday .wtxt{flex:1;min-width:0;font-size:19px;line-height:1.35;color:var(--brown)}
.wish .wtoday .chip{flex:none;font-size:13px;white-space:nowrap}
.wish .mrow{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:12px 2px;border-bottom:1px dashed var(--line)}
.wish .mrow:last-child{border-bottom:0;padding-bottom:4px}
.wish .mrow .spk{margin-top:2px}
.wish .mbody{min-width:0;display:flex;flex-direction:column;gap:5px}
.wish .mtag{font-size:12.5px;font-weight:800;color:var(--muted,#8a7a66);letter-spacing:.02em}
.wish .mtext{font-size:15px;line-height:1.5;word-break:keep-all}
.wish .mtext .nw{white-space:nowrap}
.wish .mtext .wi{width:1.35em;height:1.35em;object-fit:contain;vertical-align:-.3em;margin-right:2px}
.wish .mprog{display:flex;align-items:center;gap:10px}
.wish .mprog .bar{flex:1;height:8px;margin:0}
.wish .mprog span{flex:none;min-width:48px;text-align:right;font-size:13px;color:var(--muted,#8a7a66)}
@media (max-width:600px){
  .wish .whead .me .av{width:60px!important;height:60px!important}
  .wish .wtitle h2{font-size:19px}
  .wish .wtoday{padding:9px 10px;gap:10px;flex-wrap:wrap}
  .wish .wtoday .wtxt{font-size:17px}
  .wish .wtoday .chip{margin-left:54px}
  .wish .mrow{grid-template-columns:40px 1fr;gap:10px}
  .wish .mrow .spk,.wish .wtoday .spk{width:40px;height:40px;font-size:18px}
  .wish .mtext{font-size:14.5px}
}
/* 머리 = 캐릭터 + 제목 + 오늘 할 곳(한 덩어리) */
.wish .whead{align-items:center}
.wish .whead .wtitle{flex:none}
.wish .whead{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:8px}
.wish .whead .me{grid-row:1 / span 2;align-self:center}
.wish .whead .wtoday{grid-column:2;margin:0}
.wish .wtoday .wtxt{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:4px}
.wish .wtoday .wtxt .chip{font-size:13px}
@media (max-width:600px){
  .wish .whead{grid-template-columns:1fr;row-gap:10px}
  .wish .whead .me{display:none}
  .wish .whead .wtoday,.wish .whead .wtitle{grid-column:1}
  .wish .wtoday .chip{margin-left:0}
}
@media (max-width:600px){
  .wish .whead{grid-template-columns:auto 1fr}
  .wish .whead .me{display:block;grid-row:1;grid-column:1}
  .wish .whead .me .av{width:52px!important;height:52px!important;border-width:3px}
  .wish .whead .wtitle{grid-row:1;grid-column:2;align-self:center}
  .wish .whead .wtoday{grid-row:2;grid-column:1 / span 2}
}
.wish .whead{row-gap:0;margin-bottom:2px}
/* 친구와 이야기 */
.talkme{position:relative;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.talkme .tap{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:800;background:#fff;border:2px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--brown)}
.talk{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0}
.talk .tbig .av.pic{background:linear-gradient(#FFFFFF,#ffeccc);border:6px solid #fff;box-shadow:0 8px 0 rgba(150,100,40,.15)}
.talk .tbig .av.pic .fig{height:92%}
.talk .tbub{position:relative;width:min(420px,100%);background:#fff;border:3px solid var(--line);border-radius:20px;padding:14px 16px 10px;font-size:19px;line-height:1.45;color:var(--brown);text-align:center;min-height:86px}
.talk .tbub::before{content:"";position:absolute;left:50%;top:-14px;margin-left:-12px;border:12px solid transparent;border-top:0;border-bottom:14px solid var(--line)}
.talk .tbub p{margin:0}
.talk .tdots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.talk .tdots i{width:8px;height:8px;border-radius:50%;background:var(--line)} .talk .tdots i.on{background:var(--ok)}

/* 11-01 밤 감독님: 줄이 바뀔 때 낱말이 잘리지 않게(한국어는 띄어쓰기에서만 줄바꿈) · 닫기 ✕ 가 그림 밑에 가려지지 않게 */
body{word-break:keep-all;overflow-wrap:break-word}
.mbox .x{z-index:30}
.talk{padding-top:40px}
.talk .tbub{text-wrap:balance}

/* 캐릭터 동작(11-01 밤 감독님 「인사·작별 인사 같은 간단한 동작」) — 그림과 입은 꾸밈(.fig)을 통째로 움직임 · 코드는 움직임만(원화에 도형을 더하지 않음)
   .fig 자리 맞춤(translateX(-50%))을 모든 칸에 같이 둠 · 발끝(아래 가운데)을 축으로 · 움직임 줄이기 설정이면 멈춤 */
.av.pic .fig{transform-origin:50% 100%}
.av.pic .fig.mo-hi{animation:moHi 1.1s ease-out}
@keyframes moHi{0%{transform:translateX(-50%) }12%{transform:translateX(-50%) scale(1.06,.92)}30%{transform:translateX(-50%) translateY(-9%) scale(.96,1.05)}45%{transform:translateX(-50%) scale(1.05,.94)}60%{transform:translateX(-50%) translateY(-5%) scale(.98,1.03)}75%{transform:translateX(-50%) scale(1.02,.98)}100%{transform:translateX(-50%) }}
.av.pic .fig.mo-bye{animation:moBye 1.3s ease-in-out}
@keyframes moBye{0%{transform:translateX(-50%) }15%{transform:translateX(-50%) rotate(-7deg)}35%{transform:translateX(-50%) rotate(7deg)}55%{transform:translateX(-50%) rotate(-6deg)}72%{transform:translateX(-50%) rotate(5deg)}86%{transform:translateX(-50%) translateY(2%) scale(1,.95)}100%{transform:translateX(-50%) }}
.av.pic .fig.mo-joy{animation:moJoy 1s cubic-bezier(.3,.7,.4,1)}
@keyframes moJoy{0%{transform:translateX(-50%) }15%{transform:translateX(-50%) scale(1.08,.9)}40%{transform:translateX(-50%) translateY(-11%) rotate(-6deg) scale(.95,1.06)}60%{transform:translateX(-50%) translateY(-11%) rotate(6deg)}80%{transform:translateX(-50%) scale(1.06,.93)}100%{transform:translateX(-50%) }}
.av.pic .fig.mo-want{animation:moWant 1.4s ease-in-out}
@keyframes moWant{0%{transform:translateX(-50%) }25%{transform:translateX(-50%) translateX(3%) rotate(6deg)}50%{transform:translateX(-50%) translateX(3%) translateY(-3%) rotate(6deg)}75%{transform:translateX(-50%) translateX(2%) rotate(4deg)}100%{transform:translateX(-50%) }}
.av.pic .fig.mo-think{animation:moThink 1.4s ease-in-out}
@keyframes moThink{0%{transform:translateX(-50%) }30%{transform:translateX(-50%) rotate(-8deg)}70%{transform:translateX(-50%) rotate(-8deg)}100%{transform:translateX(-50%) }}
.av.pic .fig.mo-talk{animation:moTalk .45s ease-in-out infinite alternate}
@keyframes moTalk{from{transform:translateX(-50%)}to{transform:translateX(-50%) translateY(-1.5%) scale(1.012,.99)}}
.av.pic .fig.mo-idle{animation:moIdle 2.8s ease-in-out infinite}
@keyframes moIdle{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) scale(1.014,.986)}}
@media (prefers-reduced-motion:reduce){.av.pic .fig[class*="mo-"]{animation:none!important}}
.talk .tbig .av.pic .fig{height:84%}   /* 뛰어오를 때 모자 끝이 틀에 걸리지 않게 위 여유 */
.top a.stat,.top a.xp{text-decoration:none;color:inherit;cursor:pointer} .top a.stat:active{transform:scale(.95)} .top .subj .dot{cursor:pointer}   /* 11-01 밤: 위 숫자 누르면 그 페이지로 */
.card.flash{animation:cflash 1.6s ease-out} @keyframes cflash{0%,40%{box-shadow:0 0 0 5px var(--ok)}100%{box-shadow:0 0 0 0 transparent}}   /* 🔥 눌러 출석 칸으로 왔을 때 잠깐 빛남 */

/* 11-01 도서관 · 친구 점수 셋 */
.seg{display:flex;gap:6px;margin:-4px 0 14px;flex-wrap:wrap}
.seg a{text-decoration:none;font-weight:900;border-radius:14px;padding:8px 14px;background:#FFFFFF;border:2px dashed var(--line);color:var(--brown)}
.seg a.on{border-style:solid;border-color:var(--board);color:var(--board);background:#fff}
.fstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 4px}
.fstat .fs{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;background:#FFFFFF;border:2px solid var(--line);border-radius:16px;padding:10px 12px;min-width:0}
.fstat .fic{font-size:30px;line-height:1}
.fstat .fbody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.fstat .fbody b small{font-size:12px;color:var(--board);margin-left:4px}
.fstat .fbody .bar{height:8px;margin:0}
.fstat .fbody .muted{font-size:12px}
.fstat.mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.fstat.mini a{text-decoration:none;color:var(--brown);font-size:13px;background:#FFFFFF;border:2px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.fstat.mini a b{color:var(--board)}
.libhead{display:flex;gap:16px;align-items:center;border-radius:18px;padding:14px 16px;margin-bottom:12px;background:url(img/library/bg_library.webp) center/cover;min-height:130px}
.libtit{background:rgba(255,253,246,.92);border-radius:14px;padding:10px 14px;min-width:0}
.libtit h2{margin:0 0 4px}
.libtit p{margin:0;font-size:14px}
/* 11-01 고풍 책장: 호두나무 결(wood_tile) 판 + 금빛 안쪽 테 + 금테 이름패 · 책마다 아래 선반(plank) · 설명은 크림색 종이 */
.shelf{margin-top:22px;padding:14px 12px 16px;border-radius:18px 18px 10px 10px;background:#2A2A22 url(img/library/wood_tile.webp) repeat;background-size:174px auto;
  border:8px solid #2A2A22;box-shadow:inset 0 0 0 2px #c9a14a,inset 0 6px 18px rgba(0,0,0,.45),0 4px 0 #2a170b}
.shelf .plate{width:min(300px,82%);aspect-ratio:640/253;margin:0 auto 2px;background:url(img/library/nameplate.webp) center/contain no-repeat;display:flex;align-items:center;justify-content:center}
.shelf .plate h3{margin:0;font-family:"Gowun Batang",Batang,serif;font-weight:700;font-size:clamp(18px,5.2vw,26px);color:#5a3412;letter-spacing:.04em}
.shelf .shsub{margin:0 0 12px;text-align:center;color:#f6e3bd;font-weight:800;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.shelf .lockmsg{margin:0 0 10px;font-weight:800;color:#ffe6a8;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.shelf.locked .books{opacity:.6;filter:grayscale(.5)}
.books{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;row-gap:16px}
.bk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.bk .stand{position:relative;align-self:stretch;display:flex;justify-content:center;padding:4px 0 15px;background:url(img/library/plank.webp) bottom/100% 18px no-repeat}
a.stand{text-decoration:none;color:inherit;cursor:pointer}a.stand:active .cov{transform:scale(.97)}
.bk .paper{align-self:stretch;margin:2px 6px 0;flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;background:#fdf6e6;border-radius:10px;padding:8px 6px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.bk.read .paper{box-shadow:0 0 0 2px #1A7444,0 2px 0 rgba(0,0,0,.35)}
.bk .bt{font-size:15px;line-height:1.3}
.bk .ba{font-size:12px;color:#8a7a68}
.bk .bi{font-size:12px;line-height:1.4;color:#6a5a48;flex:1}
.bk .bb{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px}
.cov{position:relative;display:block;width:min(140px,84%);aspect-ratio:252/320;container-type:inline-size;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.cov img{width:100%;height:100%;display:block}
.cov>span{position:absolute;left:21.8%;top:17.8%;width:66.5%;height:66.9%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;text-align:center;padding:7% 6%;box-sizing:border-box;overflow:hidden}
.cov>span b{font-family:"Gowun Batang",Batang,serif;font-weight:700;color:var(--ink);font-size:14cqw;line-height:1.22;text-wrap:balance;word-break:keep-all}
.cov>span b.l{font-size:11.5cqw} .cov>span b.xl{font-size:9cqw}
.cov>span i{font-style:normal;font-family:"Gowun Batang",Batang,serif;color:var(--ink);opacity:.75;font-size:7cqw;border-top:1px solid currentColor;padding-top:3cqw;white-space:nowrap}
@media (max-width:1100px){.books{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}.fstat{gap:6px}.fstat .fs{flex-direction:column;gap:4px;padding:8px 6px;text-align:center}.fstat .fic{font-size:24px}.fstat .fbody{align-items:center;width:100%}.fstat .fbody .muted{font-size:11px}.libhead{flex-direction:column;align-items:flex-start}}
@media (max-width:720px){.fstat .nx{display:none}}

/* 11-01 회원 정보 아이 프로필: 친구 그림 + 성별 이름표 */
.kidrow .kav{border:0;background:none;padding:0;cursor:pointer;flex:none}
.kidrow .kgen{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--brown)}
.kidrow .kname{font-size:18px}
.kidrow .kstudy{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.kidrow .kstudy span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:#fbf6ec;border:2px solid var(--line);font-size:13px;color:var(--brown);white-space:nowrap}
.kidrow .kstudy i{font-style:normal;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:999px;background:var(--sc);color:#fff;font-size:11px;font-weight:900}
.kidrow .kstudy b{color:var(--sc)}
/* 11-01 회원 정보 이용권 단추 둘: 오른쪽에 엇갈려 쌓이던 것을 같은 너비 두 칸으로 나란히 */
.billbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.billbtns .btn{width:100%;box-sizing:border-box;padding:11px 8px;white-space:nowrap}
@media (max-width:420px){.billbtns .btn{font-size:14px}}

/* 11-02 관리자 공지 띠(홈 맨 위) */
.notice{position:relative;background:#fff8e1;border:2px solid #f0c96a;border-radius:16px;padding:12px 44px 12px 16px;margin-bottom:14px;color:#2A2A22;font-size:15px;line-height:1.5}
.notice b{display:block;font-size:16px;margin-bottom:2px}
.notice button{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.06);font-size:15px;cursor:pointer;color:#2A2A22}

/* 11-02 감독님 「PC 첫 화면은 스크롤 없이」 — PC(1101px~)만: 위 메뉴(wtabs)로 칸 하나씩 · 칸은 화면에 맞춰 줄임(app.js wfit) · 폰·패드 세로(~1100px)는 예전처럼 모두 이어 보임 */
.wtabs{display:none}
.wstage{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%}
@media (min-width:1101px){
  .out.wel{height:calc(100vh - 46px);min-height:0;overflow:hidden;justify-content:flex-start;gap:10px !important;padding:12px 30px 10px}
  .wel .wtabs{display:flex;align-items:center;gap:4px;flex:none;width:min(1100px,100%)}
  .wel .wtabs button{border:0;background:transparent;font:inherit;font-weight:900;font-size:16px;color:var(--brown);padding:8px 14px;border-radius:999px;cursor:pointer}
  .wel .wtabs button:hover{background:rgba(255,255,255,.55)}
  .wel .wtabs button.on{background:#fff;color:var(--board);box-shadow:0 3px 0 var(--line)}
  .wel .wtabs .btn{margin-left:10px}
  .wel:has(.wsec.on[data-k=intro]) .wtabs .brand{visibility:hidden}
  .wel .wstage{flex:1;min-height:0;justify-content:center;gap:0}
  .wel .wsec{flex:none}
  .wel .wsec:not(.on){display:none !important}
  .wel .wcta{display:none}
  .wel .footer{flex:none;margin:0;font-size:12px}
}
/* 11-02 감독님 「스크롤할 때 왼쪽 바도 같이 움직여」: 메뉴 틀(.shell)이 바닥 띠(body 아래 46px) 앞에서 끝나 sticky 왼쪽 메뉴가 맨 아래에서 46px 밀려 올라가던 것 → 틀을 바닥 끝까지(폰 세로 ~760px 은 왼쪽 메뉴가 없어 그대로) */
@media (min-width:761px){ .shell{margin-bottom:-46px} }
/* 11-02 감독님 「PC 글씨를 선명하게」: 윈도우에서만 본고딕(index.html 이 html.win 을 붙이고 글꼴을 받음) · 못 받으면 맑은 고딕 */
html.win body{font-family:"Noto Sans KR","Malgun Gothic",sans-serif}
/* 11-02 감독님 「곰수리는 왼쪽 바 글씨가 잘 안 보인다 · 밝은 색으로」: 수리 색묶음은 --chalk(#4F5548)가 바탕(#2A2A22)과 비슷해 묻힘 → 왼쪽 메뉴 글자만 크림색(고른 칸은 그대로 크림 바탕+갈색 글자) */
/* 11-02 감독님 「왼쪽·위쪽 바 이모지를 제대로 그려서」: 그림 아이콘(app.js ICO · img/icon) — 이모지와 같은 자리·크기 · 별 동전도 코드 그림 대신 그림 */
.ico{display:inline-block;width:22px;height:22px;object-fit:contain;vertical-align:-5px}
.side a .ic .ico{width:32px;height:32px;vertical-align:middle}
.side a .ic{display:inline-flex;align-items:center;justify-content:center;width:32px}
/* 11-02 「뿌옇다」: 크기를 em 대신 그림 크기(px)에 맞춤 · 동전도 배율별 그림 */
.coin{background:image-set(url("img/icon/coin_24.webp") 1x,url("img/icon/coin_48.webp") 2x) center/contain no-repeat !important}
/* 11-02 감독님 「왼쪽 맨 위 로고를 고급스럽게」: 학사모 방패 마크(img/brand/crest_*) + 크림색 글자 · 크림 상자 없앰(왼쪽 메뉴만 · 첫 화면 등 다른 로고는 그대로) */
.side .logo.crest{display:flex;align-items:center;gap:18px;height:auto;margin:0 4px 18px;padding:4px 6px;background:none;border-radius:12px;align-self:stretch}
.side .logo.crest:hover{background:rgba(255,255,255,.06)}
.side .logo.crest img{width:46px;height:60px;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.side .logo.crest span{display:flex;flex-direction:column;line-height:1.1}
.side .logo.crest b{font-size:26px;font-weight:900;color:#FAF0DB;letter-spacing:-.01em}
.side .logo.crest small{margin-top:4px;font-size:12px;font-weight:700;color:rgba(251,243,226,.72);letter-spacing:.06em}
/* 11-02 감독님 「(폰) 위쪽 1일 아이콘이 잘린다」: 그림 아이콘(22px)이 이모지보다 커서 넘침 + 원래부터 360px 6px·패드 768px 99px 넘침
   → 폰 위쪽 아이콘 16px · 작은 폰 칸 사이 좁힘 · 패드(761~1100)는 아이 이름·「무료 체험」 글자를 숨기고 아바타·🎁 D-n 만 */
@media (max-width:760px){ .top .ico{width:16px;height:16px;vertical-align:-3px} }
@media (max-width:420px){ .top{gap:5px} .top .stat{padding:4px 7px} }
@media (min-width:761px) and (max-width:1100px){ .top .me b,.top .chip.trial .tl{display:none} .top{gap:8px} .top .stat{padding:4px 9px} }/* 11-02 고침: 새 로고(.logo.crest display:flex)가 패드(~1100px) 좁은 메뉴의 로고 숨김을 덮어써 「곰선…」이 잘려 보이던 것 */
@media (max-width:1100px){ .side .logo.crest{display:none} }
/* 11-04 게임 끝 축하 화면(시안 A) — 그림은 3D 자산만 · 코드는 위치·크기·움직임만 · 움직임 줄이기 설정이면 바로 끝 모습 */
.mbox:has(.celeb){width:min(680px,94vw)}
.celeb{position:relative;padding-top:6px}
.celeb h1{font-size:40px;margin:4px 0 2px}
.celeb .cl-t{position:absolute;left:-18px;top:40px;height:190px;pointer-events:none}
.celeb .cl-b{position:absolute;right:-14px;top:150px;height:150px;pointer-events:none;animation:clHop 1.2s .3s ease-in-out 2}
@keyframes clHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) rotate(4deg)}}
.cl-stars{display:flex;justify-content:center;gap:4px;margin:2px 0 6px}
.cl-stars img{width:104px;height:104px;object-fit:contain;animation:clPop .45s cubic-bezier(.3,1.6,.5,1) backwards}
.cl-stars img:nth-child(2){transform:translateY(-12px)}
.cl-stars img.e{filter:grayscale(1) brightness(1.35);opacity:.45}
@keyframes clPop{from{transform:scale(0) rotate(-40deg);opacity:0}}
.cl-coin{display:inline-flex;align-items:center;gap:10px;background:#fff3d0;border:3px solid #f0c35a;border-radius:999px;padding:6px 18px;font-size:24px;color:var(--brown)}
.cl-coin .coin{width:36px;height:36px}
.cl-cnt{font-size:20px;color:var(--wood);min-width:2.5em;text-align:left}
.cl-cnt::before{content:"→ "}
.cl-cnt.go{animation:clBump .7s}
@keyframes clBump{50%{transform:scale(1.25)}}
.cl-say{display:flex;align-items:center;gap:10px;justify-content:center;margin:14px auto 0;max-width:470px}
.cl-say p{margin:0;background:#fff;border:3px solid var(--line);border-radius:22px;padding:10px 18px;font-size:21px;font-weight:800;color:var(--brown)}
.cl-spk{border:0;background:none;padding:0;cursor:pointer;flex:none}
.cl-spk img{width:52px;height:52px}
.cl-board{position:absolute;right:44px;top:-10px;background:#d6aa6e;border:5px solid var(--wood);border-radius:14px;padding:6px 8px 4px;width:176px;z-index:2}
.cl-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.cl-board img{width:100%;aspect-ratio:1;object-fit:contain;filter:grayscale(1) brightness(1.4);opacity:.35}
.cl-board img.on{filter:none;opacity:1;animation:clPop .35s backwards}
.cl-board span{display:block;font-size:11px;font-weight:800;color:#fff;line-height:1.3;margin-top:2px}
.cl-fly{display:flex;flex-direction:column;align-items:center;margin-top:10px;font-weight:800;color:var(--brown);font-size:15px}
.cl-fly img{width:64px;height:64px;position:relative;z-index:3;transition:transform .6s cubic-bezier(.5,-.2,.6,1)}
.cl-fly.done img{opacity:0;transition:opacity .2s;height:0}
.cl-more{margin-top:10px;text-align:left}
.cl-more summary{cursor:pointer;color:var(--sub);font-weight:800;text-align:center}
.gain .gic{width:28px;height:28px;object-fit:contain;flex:none}
.celeb .mbtns{margin-top:14px}
@media (max-width:640px){.celeb .cl-t{height:84px;left:-14px;top:150px}.celeb .cl-b{height:70px;right:-12px;top:150px}.cl-board{position:static;margin:0 auto 6px}.cl-stars img{width:68px;height:68px}.celeb h1{font-size:30px}}
@media (max-height:500px){.celeb .cl-t,.celeb .cl-b{display:none}.cl-board{width:140px}.cl-stars img{width:62px;height:62px}.celeb h1{font-size:24px}.cl-say{margin-top:6px}.cl-say p{font-size:16px;padding:6px 12px}.cl-fly{display:none}}
@media (prefers-reduced-motion:reduce){.cl-stars img,.cl-board img.on,.celeb .cl-b,.cl-cnt.go{animation:none}.cl-fly img{transition:none}}
/* 11-04 시안 C-1: 친구에게 별·동전이 날아와 붙음 */
.talk .tbig{position:relative}
.cheer{position:absolute;inset:0;pointer-events:none;z-index:9}
.cheer img{position:absolute;width:56px;height:56px;left:50%;top:40%;opacity:0;animation:clCheer 1s ease-out forwards}
.cheer img:nth-child(1){--x:-120px}.cheer img:nth-child(2){--x:0px}.cheer img:nth-child(3){--x:120px}
@keyframes clCheer{0%{transform:translate(calc(-50% + var(--x)),-160px) scale(.6);opacity:0}30%{opacity:1}80%{transform:translate(-50%,0) scale(1);opacity:1}100%{transform:translate(-50%,10px) scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.cheer{display:none}}

/* 11-04 감독님 「A로 시작해서 B로」 — 게임 끝 축하 화면 v3(화면 하나 · 시안 mock/ab.html) */
.cel2{position:fixed;inset:0;z-index:60;overflow:hidden auto;background:radial-gradient(120% 70% at 50% 34%,#fffbea 0,#ffeec2 45%,#f6d391 100%);color:var(--brown);
  display:flex;flex-direction:column;align-items:center;padding:max(64px,11vh) 20px calc(16px + env(safe-area-inset-bottom));text-align:center}
.cel2 .c2-top{display:flex;flex-direction:column;align-items:center}
.c2-stars{display:flex;align-items:flex-end;gap:6px}
.c2-stars img{width:74px;height:74px;object-fit:contain;opacity:0;transform:scale(.2);filter:drop-shadow(0 4px 6px #c9860f55);animation:c2Pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.c2-stars img:nth-child(2){width:92px;height:92px;margin-bottom:14px}
.c2-stars img.e{filter:grayscale(1) brightness(1.5);animation-name:c2PopE}
@keyframes c2Pop{to{opacity:1;transform:scale(1)}}
@keyframes c2PopE{to{opacity:.35;transform:scale(1)}}
.cel2 h1{font-size:34px;font-weight:900;color:var(--board);letter-spacing:-1px;margin:0;opacity:0;transform:scale(.6);animation:c2Pop .4s .95s cubic-bezier(.3,1.6,.5,1) forwards}
.cel2.nost h1{animation-delay:.2s;font-size:38px}
.c2-stage{position:relative;flex:1;width:100%;max-width:340px;min-height:120px;margin:4px 0 14px}
.c2-bear{position:absolute;left:50%;top:50%;height:100%;max-height:250px;transform:translate(-50%,-50%) scale(.3);opacity:0;filter:drop-shadow(0 10px 14px #0002);
  transition:all .7s cubic-bezier(.5,0,.3,1);animation:c2Bin .55s .5s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes c2Bin{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.c2-bear.hop{animation:c2Hop .9s ease-in-out infinite;opacity:1}
@keyframes c2Hop{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}
.cel2.b2 .c2-bear{animation:none;opacity:1;left:calc(100% - 30px);top:46px;height:92px;transform:translate(-50%,-50%) rotate(8deg);z-index:2}
.c2-board{position:absolute;left:0;right:0;top:50%;background:#c98f4f;border-radius:22px;padding:12px;box-shadow:inset 0 0 0 5px #a8713a,0 6px 0 #4F5548;
  opacity:0;transform:translateY(-40%) scale(.85);transition:all .55s .25s cubic-bezier(.3,1.4,.5,1)}
.cel2.b2 .c2-board{opacity:1;transform:translateY(-50%) scale(1)}
.c2-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.c2-slots i{aspect-ratio:1;border-radius:50%;background:#e9c894;box-shadow:inset 0 3px 0 #0001;display:grid;place-items:center;transition:all .3s}
.c2-slots i img{width:86%}
.c2-slots i.new img{opacity:0}
.c2-slots i.new.on{background:#fff3c4;box-shadow:0 0 0 4px #ffd75e,0 0 22px #ffd75e}
.c2-slots i.new.on img{opacity:1;animation:c2Pop .35s cubic-bezier(.3,1.8,.5,1)}
.c2-board p{color:#fff;font-weight:900;font-size:16px;margin:8px 0 0}
.c2-board p b{color:#ffe58a}
.c2-fly{position:fixed;left:0;top:0;width:64px;height:64px;z-index:9;opacity:0;pointer-events:none;transition:all .75s cubic-bezier(.5,-.3,.4,1.2)}
.c2-low{display:flex;flex-direction:column;align-items:center;width:100%}
.c2-say{position:relative;background:#fff;border-radius:22px;padding:13px 58px 13px 18px;box-shadow:0 4px 0 #ecd8b2;max-width:340px;width:100%;
  opacity:0;transform:translateY(10px);max-height:140px;overflow:hidden;transition:opacity .35s,transform .35s,max-height .45s .2s,padding .45s .2s}
.c2-say p{margin:0;font-size:20px;font-weight:800;line-height:1.35;color:var(--brown)}
.c2-say button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;padding:0;width:44px;height:44px;cursor:pointer}
.c2-say button img{width:100%}
.cel2.on .c2-say{opacity:1;transform:none}
.cel2.b2 .c2-say{opacity:0;max-height:0;padding-top:0;padding-bottom:0;box-shadow:none}
.c2-coin{display:flex;align-items:center;gap:6px;background:#FFFFFF;border:3px solid #f1cf7a;border-radius:99px;padding:5px 16px 5px 6px;font-weight:900;font-size:17px;margin:12px 0 2px;opacity:0;transition:opacity .3s}
.c2-coin img{width:34px;height:34px}
.c2-coin small{font-weight:700;color:#a07a4a;font-size:13px}
.cel2.on .c2-coin{opacity:1}
.c2-badge{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:14px;font-weight:800;color:#8a5a20;opacity:0;transition:opacity .3s}
.c2-badge .gic{width:26px;height:26px;object-fit:contain}
.c2-badge span{margin-right:8px}
.cel2.done .c2-badge{opacity:1}
.c2-btns{width:100%;max-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.c2-btns .go{grid-column:1/-1;background:var(--wood);color:#fff;font-size:22px;font-weight:900;border-radius:99px;padding:14px;text-decoration:none;box-shadow:0 5px 0 #4F5548}
.c2-btns .sm{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff8;border:2px solid #e3c79a;border-radius:99px;padding:8px;font-family:inherit;font-weight:800;font-size:15px;color:var(--brown);text-decoration:none;cursor:pointer}
.c2-btns .sm img{width:24px;height:24px}
.c2-btns .sm:nth-child(2):nth-last-child(3){grid-column:1/-1}
/* 폰 가로 · 낮은 화면: 왼쪽 무대 / 오른쪽 별·제목·말·단추 */
@media (orientation:landscape){
  .cel2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:22px;padding:14px max(24px,env(safe-area-inset-left)) 12px;align-items:center}
  .cel2 .c2-top{grid-column:2;grid-row:2}
  .c2-stars img{width:52px;height:52px}.c2-stars img:nth-child(2){width:64px;height:64px;margin-bottom:10px}
  .cel2 h1{font-size:26px}
  .c2-stage{grid-column:1;grid-row:2/4;height:100%;max-height:none;margin:0;justify-self:center;align-self:stretch}
  .c2-low{grid-column:2;grid-row:3;align-self:end}
  .c2-bear{height:100%;max-height:none}
  .c2-say p{font-size:17px}.c2-say{padding:10px 54px 10px 14px}
  .c2-coin{margin-top:8px}
  .c2-btns{margin-top:8px}.c2-btns .go{font-size:19px;padding:10px}.c2-btns .sm{padding:6px}
  .cel2.b2 .c2-bear{height:72px;top:8%}
}
/* 11-04 감독님 「오른쪽 묶음을 곰돌이 하단과 수평정렬로」: 가로 두 칸에서 곰 높이 = 오른쪽 묶음(별~단추) 높이 → 곰 발끝과 단추 아래가 한 줄 */
/* 11-04 감독님 「PC 화면에서 칭찬 화면 아래가 좀 잘린다」: 낮은 PC 창(높이 561~760)은 가로 두 칸으로, 글·단추는 크게 */
@media (orientation:landscape) and (min-height:561px){
  .cel2{column-gap:40px;padding:10vh 48px 24px;grid-template-rows:auto auto 1fr}   /* 11-04 감독님 「별 위쪽부터 화면 끝의 여백은 수직길이의 10%」(PC) */
  .cel2 .c2-top{grid-row:1;margin-bottom:6px}.c2-low{grid-row:2;align-self:start}.c2-stage{grid-row:1/3}
  .c2-stars img{width:84px;height:84px}.c2-stars img:nth-child(2){width:104px;height:104px;margin-bottom:16px}
  .cel2 h1{font-size:40px}
  .c2-stage{max-width:440px}
  .c2-say,.cel2.b2 .c2-say{max-width:440px;padding:14px 64px 14px 18px}.c2-say p{font-size:22px}
  .c2-coin{font-size:19px}.c2-btns{max-width:440px}.c2-btns .go{font-size:23px;padding:13px}.c2-btns .sm{font-size:16px;padding:9px}
  .cel2.b2 .c2-bear{height:110px;top:calc(100% - 290px)}
  .c2-board{top:auto;bottom:0;transform:translateY(10%) scale(.85)}.cel2.b2 .c2-board{transform:none}   /* ② 스티커판 아래 = 단추 아래 */
  .cel2.b2 .c2-say{max-height:0;padding-top:0;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.cel2 *{animation-duration:.01s !important;transition-duration:.01s !important}}
/* PC·패드(넓고 높은 화면): 같은 구도를 크게 */
@media (orientation:portrait) and (min-width:700px) and (min-height:861px){
  .cel2{padding-top:10vh}
  .c2-stars img{width:110px;height:110px}.c2-stars img:nth-child(2){width:136px;height:136px;margin-bottom:20px}
  .cel2 h1{font-size:50px}
  .c2-stage{max-width:480px;margin:8px 0 18px}
  .c2-bear{max-height:340px}
  .cel2.b2 .c2-bear{height:130px;left:calc(100% + 34px);top:60px}
  .c2-board{padding:16px}.c2-slots{gap:10px}.c2-board p{font-size:20px}
  .c2-say{max-width:500px;padding:16px 70px 16px 22px}.c2-say p{font-size:26px}.c2-say button{width:54px;height:54px}
  .c2-coin{font-size:21px}.c2-coin img{width:42px;height:42px}
  .c2-badge{font-size:17px}.c2-badge .gic{width:32px;height:32px}
  .c2-btns{max-width:500px;gap:10px}.c2-btns .go{font-size:26px;padding:16px}.c2-btns .sm{font-size:18px;padding:10px}
}
/* 큰 PC 화면(가로 · 높이 900 이상): 두 칸 그대로 크게 */
@media (orientation:landscape) and (min-height:900px){
  .c2-stars img{width:120px;height:120px}.c2-stars img:nth-child(2){width:150px;height:150px;margin-bottom:22px}
  .cel2 h1{font-size:56px}
  .c2-stage,.c2-say,.cel2.b2 .c2-say,.c2-btns{max-width:580px}
  .c2-say p{font-size:28px}.c2-say{padding:18px 76px 18px 22px}.c2-say button{width:58px;height:58px}
  .c2-coin{font-size:24px}.c2-coin img{width:46px;height:46px}.c2-badge{font-size:19px}
  .c2-btns .go{font-size:30px;padding:18px}.c2-btns .sm{font-size:20px;padding:12px}.c2-btns .sm img{width:30px;height:30px}
  .c2-board p{font-size:22px}.c2-slots{gap:10px}
  .cel2.b2 .c2-bear{height:150px;top:calc(100% - 380px)}
}
/* 11-04 새 그림 적용(힉스필드): 축하 배경 · 스티커판 · 빈 칸 · 칭찬 스티커 5종 · 선물 상자 — 코드는 자리·크기·움직임만 */
.cel2{background:#fff6dc url(img/reward/bg_tall.webp) center/cover no-repeat}
@media (orientation:landscape){.cel2{background-image:url(img/reward/bg_wide.webp)}}
.c2-board{background:url(img/reward/board.webp) center/100% 100% no-repeat;box-shadow:none;padding:7% 8.5% 6%;border-radius:0}
.c2-slots i{background:url(img/reward/slot.webp) center/contain no-repeat;box-shadow:none;border-radius:0}
.c2-slots i img{width:92%;filter:drop-shadow(0 2px 2px #0002)}
.c2-slots i.new.on{background:url(img/reward/slot.webp) center/contain no-repeat;box-shadow:none}
.c2-slots i.new.on img{filter:drop-shadow(0 0 8px #ffd75e) drop-shadow(0 2px 2px #0002)}
.c2-board p{color:#6b3f12;text-shadow:0 1px 0 #fff6;white-space:nowrap;font-size:15px}
.c2-board p b{color:#d0610f}
.c2-fly{object-fit:contain}
/* 선물 상자(10칸이 다 찼을 때): 스티커판이 물러나고 상자가 들어옴 → 아이가 누르면 열리고 물건이 튀어나옴 */
.c2-giftw{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:scale(.6);transition:all .5s cubic-bezier(.3,1.5,.5,1)}
.cel2.gift .c2-board{opacity:0;transform:translateY(-50%) scale(.7)}
.cel2.gift .c2-giftw{opacity:1;pointer-events:auto;transform:none}
.c2-gift{position:relative;border:0;background:none;padding:0;cursor:pointer;width:min(62%,260px);aspect-ratio:1;animation:c2Wob 1.4s ease-in-out infinite}
.c2-gift img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.c2-gift .g1{opacity:0}
.c2-gift .gi{inset:auto;left:29%;top:33%;width:42%;height:42%;opacity:0;transform:translateY(45%) scale(.3);transition:all .6s .15s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 4px 6px #0003)}
.c2-giftw.open .c2-gift{animation:none}
.c2-giftw.open .g0{opacity:0}.c2-giftw.open .g1{opacity:1}
.c2-giftw.open .gi{opacity:1;transform:translateY(-8%) scale(1.15);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 4px 6px #0003)}
.c2-gtxt{margin:8px 0 0;font-weight:900;font-size:20px;color:var(--brown);background:#fffdf6e6;border-radius:99px;padding:6px 16px}
@keyframes c2Wob{0%,100%{transform:rotate(0)}10%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}30%{transform:rotate(-4deg)}40%{transform:rotate(0)}}
.cel2.b2.gift .c2-bear{opacity:1}
@media (prefers-reduced-motion:reduce){.c2-gift{animation:none}}
/* 11-04 도서관 = 렛미플라이 그림책 한글판·영문판(누르면 짝 앱 books/) */
.libseg{justify-content:center;margin:16px 0 0}.libseg a{font-size:16px;padding:10px 18px}
a.bk.lmf{text-decoration:none;color:inherit;cursor:pointer}
.lcov{position:relative;display:block;width:min(140px,84%);aspect-ratio:339/480;transition:transform .15s}
.lcov img{width:100%;height:100%;display:block;object-fit:cover;border-radius:3px 7px 7px 3px;box-shadow:0 3px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.1)}
a.bk.lmf:active .lcov{transform:scale(.96)}
.lcov .ed{position:absolute;right:-6px;top:-6px;font-style:normal;font-weight:900;font-size:11px;padding:3px 7px;border-radius:99px;color:#fff;background:#d6453d;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.lcov .ed.en{background:#2b6cb0}
.bk .rd{font-size:12.5px;font-weight:900;color:var(--board)}
/* 11-04 도서관 책장 리뉴얼(시안 판4) — 그림: img/library2/(힉스필드) · 글은 제목·작은 머리말만 */
.lib2{display:grid;gap:14px}
.l2hero{position:relative;aspect-ratio:1344/752;max-height:340px;width:100%;border-radius:22px;overflow:hidden;background:url(img/library2/hero.webp) right center/cover no-repeat;box-shadow:0 6px 0 rgba(90,50,10,.25);display:grid;grid-template-columns:auto minmax(0,1fr) 42%;grid-template-rows:100%;column-gap:3%;align-items:start;padding:4% 0 4% 4%}   /* 11-04 감독님 「오늘의 그림책은 위쪽 · 캐릭터와 책 사이 · 겹침 없이」 → 표지 | 글 | 곰선생 자리(그림 오른쪽 42%) */
.l2cov{align-self:center;height:100%;max-height:100%;aspect-ratio:339/480;transform:rotate(-5deg);transition:transform .2s}
.l2cov img{width:100%;height:100%;object-fit:cover;border-radius:3px 9px 9px 3px;box-shadow:0 10px 18px rgba(60,30,5,.45)}
.l2cov:active{transform:rotate(-5deg) scale(.96)}
.l2ht{display:grid;gap:10px;justify-items:start;align-self:start;min-width:0;padding-top:2%}
.l2ht small{white-space:nowrap;font-weight:900;font-size:13px;color:#8a4f16;background:rgba(255,248,232,.85);border-radius:99px;padding:2px 10px}
.l2ht b{font-family:"Nanum Myeongjo","Gowun Batang",serif;font-weight:800;font-size:clamp(17px,2.6vw,28px);line-height:1.25;color:#3d2410;text-shadow:0 0 10px #FFFFFF,0 0 4px #FFFFFF;word-break:keep-all}
.l2play{width:clamp(56px,8vw,86px);margin-top:4px;display:block}
.l2play img{width:100%;display:block;transition:transform .12s}
.l2play:active img{content:url(img/library2/play_down.webp);transform:translateY(2px)}
.l2tabs{display:flex;gap:12px;justify-content:center}
.l2tabs a{flex:0 1 210px;display:block;transition:transform .15s}
.l2tabs a img{width:100%;display:block;filter:drop-shadow(0 3px 2px rgba(60,30,5,.35))}
.l2tabs a.on{transform:translateY(-3px)}
.l2case{border-radius:18px;padding:16px clamp(10px,3vw,26px) 8px;background:#ead9b6 url(img/library2/birch_back.webp) center top/100% auto repeat-y;box-shadow:inset 0 0 0 5px #c9a877,inset 0 0 14px rgba(120,80,30,.14),0 4px 10px rgba(90,50,10,.16)}
.l2case h3{margin:6px 4px 0;font:800 19px/1.3 GBE,GBK,'Noto Sans KR','Malgun Gothic',sans-serif;color:#2A2A22}
.l2case h3 small{font:inherit;font-size:14px;color:#4F5548;margin-left:6px}
.l2row{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:0 clamp(10px,2.4vw,22px);align-items:end;padding:14px 4% calc(clamp(14px,2.8vw,26px) + 6px);margin-bottom:6px;background:url(img/library2/birch_shelf.webp) center bottom/100% clamp(22px,4vw,38px) no-repeat}
.l2bk{position:relative;display:block;margin-bottom:clamp(8px,1.6vw,15px);transition:transform .15s}
.l2bk>img:first-child{width:100%;aspect-ratio:339/480;object-fit:cover;display:block;border-radius:2px 6px 6px 2px;box-shadow:0 6px 9px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.1)}
.l2bk:active{transform:translateY(-4px) scale(.98)}
.l2st{position:absolute;right:-8%;top:-8%;width:38%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.l2bar{position:absolute;left:8%;right:8%;bottom:6%;height:6px;border-radius:9px;background:rgba(0,0,0,.45)}
.l2bar em{display:block;height:100%;border-radius:9px;background:#f2b705}
.l2note{font-size:13px}
@media (max-width:700px){.l2hero{aspect-ratio:auto;height:200px;background-position:72% center;grid-template-columns:auto minmax(0,1fr) 33%;padding:4% 0 4% 3%;column-gap:3%}.l2cov{height:92%}.l2ht small{font-size:11.5px}.l2tabs a{flex-basis:46%}}
/* 11-05 감독님 「코드로 그린 것 전부 이미지로」 — 보상 칸 단추 · 가게 단추 · 오늘의 그림책 이름표 · 점수 칸 */
.rtabs{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:10px}
.rtabs a{position:relative;display:block;flex:0 0 calc((100% - 16px) / 3);max-width:170px;transition:transform .12s}
.rtabs a img{width:100%;display:block;filter:drop-shadow(0 2px 2px rgba(60,30,5,.3))}
.rtabs a.on{transform:translateY(-2px)}
.rtabs a:active{transform:scale(.96)}
.rcnt{position:absolute;right:-4px;top:-6px;min-width:22px;height:22px;border-radius:11px;background:#d6453d;color:#fff;font-style:normal;font-weight:900;font-size:12px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rseg{display:flex;flex-wrap:nowrap;gap:6px 10px;margin:0 0 14px}
.rseg a{display:block;flex:1 1 0;min-width:0;max-width:190px;transition:transform .12s}
.rseg a img{width:100%;display:block;filter:drop-shadow(0 2px 2px rgba(60,30,5,.3))}
.rseg a.on{transform:translateY(-2px)}
.l2tag{width:clamp(96px,22vw,150px);display:block;filter:drop-shadow(0 2px 2px rgba(60,30,5,.25))}
.fstat.fcard .fs{background:#fff;border:2px solid #EFE2C2;border-radius:18px;padding:12px 8px 10px;flex-direction:column;text-align:center;gap:6px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.fstat.fcard .fic{width:48px;height:44px;object-fit:contain;font-size:0}
.fstat.fcard .fbody{align-items:center;width:100%;gap:5px}
.fstat.fcard .fbody b{font:800 16px/1.2 GBE,GBK,'Noto Sans KR','Malgun Gothic',sans-serif;color:#2A2A22}
.fstat.fcard .fbody b small{font:inherit;font-size:13px;color:#1A7444;margin-left:3px}
.fstat.fcard .fbody .bar{display:block;width:84%;height:8px;margin:0;border-radius:99px;background:#f1e6d0;overflow:hidden}
.fstat.fcard .fbody .bar i{display:block;height:100%;border-radius:99px;background:#1A7444}
.fstat.fcard .fbody .muted{font-size:12px;color:#4F5548}

/* 11-05 감독님 「단추들도 코딩으로 쇼케이스처럼 깨끗하게」: 나무 팻말 그림 → 쇼케이스 알약 단추(영어 Baloo 2 · 한글 Pretendard Bold) */
@font-face{font-family:GBE;src:url(img/library2/gb_en.woff2) format('woff2');font-weight:800}@font-face{font-family:GBK;src:url(img/library2/gb_ko.woff2) format('woff2');font-weight:800}
.rtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px;max-width:560px}
.rtabs a,.rseg a,.l2tabs a{font:800 15px/1.2 GBE,GBK,'Noto Sans KR','Malgun Gothic',sans-serif;position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:6px 8px;box-sizing:border-box;border:2px solid #EFE2C2;border-radius:999px;background:#FFFFFF;color:#4F5548;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.1);transition:transform .12s;max-width:none}
.rtabs a.on,.rseg a.on,.l2tabs a.on{transform:none;background:#2A2A22;border-color:#2A2A22;color:#fff}
.rseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;max-width:560px}
.rseg a.on{background:#1A7444;border-color:#1A7444}
.rseg a img{width:24px;height:24px;object-fit:contain;filter:none;flex:0 0 auto}
.rtabs a:active,.rseg a:active,.l2tabs a:active{transform:scale(.96)}
.l2tabs{gap:10px}.l2tabs a{flex:0 1 150px;font-size:17px;min-height:46px}
@media (max-width:700px){.l2tabs a{flex-basis:42%}.rseg a{font-size:14px;padding:6px 4px}}

/* 11-06 시험판: 오늘의 그림책 — 표지·단추·곰을 가운데로 모으고 사이만 띄움 */
.l2hero{--hh:clamp(240px,27vw,340px);display:flex;justify-content:center;align-items:center;gap:clamp(20px,4%,44px);background:url(img/library2/hero.webp) center/cover no-repeat;padding:18px 20px;aspect-ratio:auto;height:var(--hh);max-height:none}
.l2cov{flex:none;height:100%;width:auto;align-self:center;margin-inline:calc((var(--hh) - 36px)*.044)}   /* 기울어 삐져나온 모서리만큼 띄워 눈에 보이는 간격을 맞춤 */
.l2ht{flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0}.l2ht .l2play{margin:0}
.l2bear{flex:none;height:100%;width:auto;max-width:42%;object-fit:contain;display:block;filter:drop-shadow(4px 8px 8px rgba(30,40,10,.28))}
@media (max-width:700px){
  .l2hero{height:auto;gap:2.6%;padding:14px 8px;background-position:center}
  .l2cov{flex:0 0 26%;height:auto;aspect-ratio:339/480;margin-inline:1.6%}
  .l2ht{flex:0 0 24%;gap:8px}.l2ht .l2tag{width:100%}.l2play{width:62%}
  .l2bear{flex:0 0 37%;height:auto;width:37%;max-width:37%}
}

/* 곰선생 사이트 리디자인(2026-11-06 감독님 「디자인 코드만 완전히 다시 설계」)
   철칙 1번: 캐릭터·글자는 프레임이나 서로 겹치지 않는다 · 프레임에 붙지 않는다 · 프레임 안에 여유를 둔다
   색 = 주색 하나 + 행동색(초록) + 포인트(노랑) · 바탕은 아주 연하게 · 카드는 흰색 · 테두리는 얇게 */
:root,body.sub-suri,body.sub-hangul{--pri:#1C726C;--pri-d:#155551;--soft:#FAF0DB;--go:#1C726C;--go-d:#155551;--yel:#FFC800;--wall:#F2E0BA;--paper:#FFF8EC;--cream:#FAF0DB;--line:#DCC592;--wood:#DCC592;--floor:#F2E0BA;--floor2:#F2E0BA;--board:#1C726C;--brown:#2A2A22;--ink:#2A2A22;--sub:#4F5548;--chalk:#4F5548;--ok:#2F7D32;--bad:#C8372F;--lv:#1C726C;--l1:#1A7444;--r:20px;--bw:1.5px}
body{background:var(--wall);color:var(--ink)}body::after{display:none}
h1,h2,h3,.pagehead h1{font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;color:var(--ink);letter-spacing:0}
h1{font-size:28px}h2{font-size:21px;margin-bottom:14px}h3{font-size:17px;margin-bottom:10px}
.muted{color:var(--sub)}

/* 틀 */
.shell{grid-template-columns:224px minmax(0,1fr);background:none}
.side{background:#fff;border-right:var(--bw) solid var(--line);padding:20px 14px;gap:4px}
.side a,.side a:not(.logo){color:var(--sub);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:17px;padding:11px 13px;border-radius:14px}
.side a:hover{background:var(--soft)}.side a.on{background:var(--pri);color:#fff}.side .sep{height:1.5px;background:var(--line);margin:10px 8px}
.side .logo.crest,.side a.logo{background:none;height:auto;padding:4px 8px;margin:0 0 16px;color:var(--ink)}.side .logo.crest b{color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:24px}.side .logo.crest small{color:var(--sub)}
.side .demo{font-size:13px;opacity:.7}.side .badge{margin-left:auto}
.top{background:#fff;border-bottom:var(--bw) solid var(--line);padding:10px 30px;gap:12px;min-height:64px}
.top .chip:not(.trial),.top .xp{display:none}
.top .me b{font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:17px}.top .me .av{border:var(--bw) solid var(--line);background:var(--soft)}
.stat{background:var(--soft);border:0;border-radius:999px;padding:7px 14px;color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:16px}
.subj{background:var(--soft);border:0;padding:4px}.subj button{color:var(--sub);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:15px;padding:6px 16px}.subj button span{display:none}.subj button.on{background:var(--pri);color:#fff}
.chip{background:var(--soft);border:0;color:var(--ink);font-weight:700;padding:4px 11px}.chip.lv{background:var(--pri);color:#fff}.chip.trial{background:#FFF6D6;color:#7A5A00}
.page{padding:28px 32px 64px;max-width:1200px;margin:0 auto}
.pagehead{align-items:center;margin-bottom:22px}.pagehead .headdeco{display:none}.cornerL,.cornerR{display:none}

/* 카드·단추 */
.card,.kpi{background:#fff;border:var(--bw) solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:none}
.kpi{padding:18px 20px}.kpi .v{color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;letter-spacing:0}.kpi .l{color:var(--sub)}
.btn{background:var(--pri);color:#fff;border-radius:16px;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;padding:12px 24px;box-shadow:0 4px 0 var(--pri-d)}
.btn:hover{transform:none;box-shadow:0 4px 0 var(--pri-d)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pri-d)}
.btn.sub{background:#fff;color:var(--ink);border:var(--bw) solid var(--line);box-shadow:0 3px 0 var(--line)}.btn.green{background:var(--go);box-shadow:0 4px 0 var(--go-d)}.btn.small{padding:7px 14px;border-radius:12px;font-size:14px}.btn.big{font-size:20px;padding:15px 32px}
.bar{background:var(--soft);border-radius:99px}.bar i{background:var(--pri);border-radius:99px}
.field input,.field select,input,select{border-color:var(--line);border-radius:12px}
.outbox{background:#fff;border:var(--bw) solid var(--line);border-radius:24px;padding:34px 40px;box-shadow:0 10px 30px rgba(30,90,130,.08)}
.decobox .dl,.decobox .dr{display:none}.gate{background:#fff;border-radius:24px}
.modal,.mbox{border-color:var(--line)}

/* 게임 카드: 썸네일 위에 글자를 얹지 않음 */
.gcard{background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:none}.gcard:hover{transform:none;border-color:var(--pri)}
.gcard.next{border:3px solid var(--pri);box-shadow:none}
.gcard .th{background-color:var(--soft)}
.gcard .bd{padding:10px 12px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.gcard .bd .kind{flex:0 0 100%;font-size:12.5px;font-weight:700;color:var(--pri)}.gcard .bd b{flex:1 1 auto;min-width:0;font-size:14px;color:var(--ink)}
.gcard.next .bd .kind::after{content:' · 다음';color:var(--go)}.gcard.next::after,.gcard.next::before{display:none!important}
.today{gap:14px}

/* 학습 지도 */
.board{background:#fff;border:var(--bw) solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:none}
.hotabs{gap:6px;margin-bottom:16px}.hotabs a{color:var(--sub);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:20px;background:var(--soft);padding:8px 8px}.hotabs a small{font-family:'Malgun Gothic',sans-serif}.hotabs a.on{background:var(--pri);color:#fff}
.week{background:var(--cream);border-radius:18px;padding:18px 20px;margin-bottom:14px}.weekhead .wk{background:var(--pri)}.day{background:#fff;border:var(--bw) solid var(--line);border-radius:16px;padding:14px}.day .dh{color:var(--ink)}

/* 보상 탭: 그림 판 대신 한 줄 탭 */
.rtabs{display:flex;flex-wrap:nowrap;gap:8px;max-width:none;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}.rtabs::-webkit-scrollbar{display:none}
.rtabs a{flex:1 0 auto;max-width:none;background:#fff;border:var(--bw) solid var(--line);border-radius:14px;padding:11px 16px;text-align:center;color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-size:16px;text-decoration:none;transform:none!important;box-shadow:none;font-weight:800}.rtabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.rtabs .rcnt{position:static;display:inline-block;margin-left:5px;background:var(--bad);color:#fff;border-radius:99px;padding:0 7px;font-size:12px;font-style:normal;box-shadow:none}
.rseg{gap:8px;max-width:none;display:flex}.rseg a{flex:1 1 0;max-width:none;background:var(--soft);border:0;border-radius:12px;padding:10px 12px;color:var(--ink);text-align:center;font-family:'NSR','Malgun Gothic',sans-serif;box-shadow:none;transform:none!important;font-weight:800}.rseg a.on{background:var(--go);color:#fff;border:0}
.claim{background:#fff;border:var(--bw) solid var(--line);border-radius:16px}.claim.ready{background:#FFFBE8;border-color:var(--yel)}
.l2tabs a{border-radius:14px;box-shadow:none;border:var(--bw) solid var(--line);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;background:#fff;color:var(--ink)}.l2tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.tabs a{background:#fff;color:var(--ink);border:var(--bw) solid var(--line)}.tabs a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.t td,.t th,.set,.mission{border-color:var(--line)}.t th{background:var(--cream);color:var(--ink)}

/* 폰 아래 메뉴 */
.tabbar{background:#fff;border-top:var(--bw) solid var(--line)}.tabbar a{color:var(--sub);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}.tabbar a.on{color:var(--pri)}

/* 곰 선생님의 쪽지 */
.hero{position:relative;background:var(--pri);border-radius:24px;color:#fff;margin-bottom:20px;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}
.hero .spk{flex:none;width:44px;height:44px;border:0;background:var(--soft);box-shadow:none}
.hero.sealed{display:flex;align-items:center;justify-content:center;gap:44px;padding:28px 36px;cursor:pointer}
.hero.sealed h1{color:#fff;font-size:30px;line-height:1.3;margin:0;word-break:keep-all}.hero.sealed .harr{display:flex;align-items:center;gap:16px}
.henv{position:relative;width:150px;flex:none;line-height:0}.henv svg{width:100%;height:auto;display:block}
.henv .hring{position:absolute;left:50%;top:55.5%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;animation:hring 1.5s ease-out infinite}
@keyframes hring{0%{box-shadow:0 0 0 0 rgba(255,200,0,.95)}100%{box-shadow:0 0 0 18px rgba(255,200,0,0)}}
.hero.opened{display:grid;grid-template-columns:auto minmax(0,1fr) 180px;align-items:center;gap:24px;padding:24px 30px}
.hero .hteach{width:136px;height:136px;object-fit:contain;display:block}
.hbub{background:#fff;color:var(--ink);border-radius:20px;padding:20px 24px;display:flex;align-items:center;gap:16px;min-width:0}.hbub .hmid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.hero.unfold .hbub{animation:hpop .35s cubic-bezier(.2,.8,.3,1.2) both}@keyframes hpop{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
.h1l{font-size:22px;line-height:1.4;word-break:keep-all}.h2l{font-size:30px;line-height:1.3;word-break:keep-all}
.hf{display:inline-block;width:1.3em;height:1.45em;vertical-align:-.35em;margin:0 .08em}.hf svg{width:100%;height:100%;display:block}.hf2{width:2.6em}.hf2 svg{display:inline-block;width:50%}
.h2l .wi,.h2l .rkb{width:1.5em!important;height:1.5em!important;object-fit:contain;vertical-align:-.4em;margin:0 .1em}
.hgo{display:flex;align-items:center;justify-content:center;height:84px;border-radius:20px;background:var(--go);box-shadow:0 6px 0 var(--go-d);color:#fff;font-size:38px;letter-spacing:2px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;width:100%}.hgo:active{transform:translateY(4px);box-shadow:0 2px 0 var(--go-d)}.hgo img{height:60px}
@media (prefers-reduced-motion:reduce){.henv .hring,.hero.unfold .hbub{animation:none}}

@media (max-width:1100px){.shell{grid-template-columns:76px minmax(0,1fr)}.side{padding:16px 8px}.side a,.side a:not(.logo){justify-content:center;padding:10px 6px;font-size:0}.side .ic{font-size:20px}}
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr)}.top{padding:8px 14px;min-height:56px;gap:8px}.top .belt,.top .me b{display:none}
  .page{padding:16px 14px 88px}.card,.kpi{padding:18px 16px}.outbox{padding:26px 20px;border-radius:20px}.board{padding:14px}.week{padding:14px}.day{padding:12px}
  h1{font-size:24px}.rtabs a{padding:10px 14px;font-size:15px}
  .hero.sealed{flex-direction:column;gap:14px;padding:22px 18px;text-align:center}.hero.sealed h1{font-size:23px}.hero.sealed .harr{gap:10px}.henv{width:112px}
  .hero.opened{grid-template-columns:auto minmax(0,1fr);gap:14px 12px;padding:18px 16px}.hero .hteach{width:72px;height:72px}.hbub{padding:14px 14px;gap:8px}.hbub .spk{width:36px;height:36px}.h1l{font-size:16px}.h2l{font-size:20px}.hgo{grid-column:1/-1;height:62px;font-size:30px}
}

/* 오늘 할 공부 안내 · 상표 · 장식 */
.hinfo{margin:0 0 12px}.hinfo .muted{font-size:13px}.hinfo .hprog{display:flex;align-items:center;gap:10px;margin-top:6px}.hinfo .bar{flex:1;height:8px;margin:0}.hinfo .hprog span{flex:none;font-size:12.5px;color:var(--sub)}
.brand b i{color:var(--ink)!important;font-style:normal;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}
.days7 i,.st i,.sticker-mini,.steps span{background-color:var(--soft)}.heat .c{background:var(--soft);color:var(--sub)}
.deco{display:none}.gate .deco{display:block}

/* 11-06 쪽지 프레임 다시: 연한 색 카드 한 장 · 왼쪽 동그란 그림 · 가운데 메시지 · 오른쪽 소리와 GO(겹침 없음 · 안쪽 여백 넉넉히) */
.hero,.hero.sealed,.hero.opened{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;background:var(--soft);color:var(--ink);border-radius:24px;padding:22px 28px;box-shadow:none;margin-bottom:20px;text-align:left}
.hero.opened{grid-template-columns:auto minmax(0,1fr) 172px}
.hero .hav{width:112px;height:112px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;position:relative;padding:0}
.hero .hteach{width:84px;height:84px}
.hero .henv{width:112px}.hero .henv svg{width:76px}.hero .henv svg rect{stroke:var(--line);stroke-width:3}
.hero .henv .hring{left:50%;top:51%;width:24px;height:24px;aspect-ratio:auto}
.hero .hmsg{min-width:0}.hero.sealed h1{color:var(--ink);font-size:27px;line-height:1.3;margin:0}.hero.sealed h1 span{white-space:nowrap}
.hlab{font-size:15px;color:var(--pri);margin-bottom:4px}
.hbub{background:none;padding:0;border-radius:0;gap:16px}.hero.unfold .hbub{animation:none}.hero.unfold{animation:hpop .3s ease-out both}
.hbub .hmid{gap:2px}.h1l{font-size:20px;line-height:1.45;color:var(--sub)}.h2l{font-size:28px;line-height:1.35;color:var(--ink)}
.hero .spk{background:#fff;width:46px;height:46px}
.hgo{height:68px;border-radius:18px;font-size:32px;box-shadow:0 5px 0 var(--go-d)}
@media (max-width:760px){
  .hero,.hero.sealed,.hero.opened{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:18px 16px;flex-direction:initial;border-radius:20px}
  .hero .hav{width:76px;height:76px}.hero .hteach{width:58px;height:58px}.hero .henv{width:76px}.hero .henv svg{width:54px}.hero .henv .hring{width:18px;height:18px}
  .hero.sealed h1{font-size:20px}.hlab{font-size:13px;margin-bottom:2px}.hero .spk{width:38px;height:38px;font-size:15px}
  .hero.opened{grid-template-columns:auto minmax(0,1fr)}.hbub{padding:0;gap:8px}.h1l{font-size:16px}.h2l{font-size:21px}.hgo{grid-column:1/-1;height:58px;font-size:28px}
}

/* 쪽지 봉투 또렷하게 */
.hero .henv{background:var(--pri)}.hero .henv svg{width:80px}.hero .henv svg rect{stroke:none}
.hero .henv .hring{width:22px;height:22px;top:52%}
@keyframes hring{0%{box-shadow:0 0 0 0 rgba(255,200,0,.9)}100%{box-shadow:0 0 0 12px rgba(255,200,0,0)}}
@media (max-width:760px){.hero .henv svg{width:56px}.hero .henv .hring{width:16px;height:16px}}

/* 도서관 책장: 흰 바탕 위에서 표지가 살도록 짙은 남색 */
.l2case{background:#1E2A38;box-shadow:none;border-radius:22px;padding:22px clamp(14px,3vw,30px) 14px}
.l2case h3{color:#fff;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;font-size:20px;margin:0 2px 2px}.l2case h3 small{color:#AFC0D0}
.l2row{background:linear-gradient(#41566B,#34475A) center bottom/100% 12px no-repeat;padding:16px 4% 28px;margin-bottom:12px}
.l2bk{margin-bottom:0}.l2bk>img:first-child{box-shadow:0 8px 12px rgba(0,0,0,.5)}
.l2hero{box-shadow:none}

/* 안내 창 */
.modal{background:rgba(20,45,65,.45)}.mbox{background:#fff;border:0;border-radius:24px;padding:30px 34px;box-shadow:0 20px 50px rgba(20,60,90,.25)}.mbox .x{background:var(--soft);color:var(--ink);border:0}
.gain{background:var(--cream);border:0;border-radius:14px}.gain.big{background:#FFFBE8}.gain .v{color:var(--ink)}
.cert{border:2px solid var(--line);border-radius:24px;background:#fff}
.lt .ltq{background:var(--cream);border:0}.lt .ltopts button{border:2px solid var(--line);border-radius:16px;color:var(--ink)}
.notice{background:#FFFBE8;border:0;border-radius:16px}

/* 게임 화면 */
.playwrap{background:#1E2A38}.playbar .back{background:rgba(255,255,255,.14);border:0;border-radius:14px;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}.playbar h1{font-weight:400}.playbar .k{color:#AFC0D0}
.frame{border:0;border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.35)}

/* 게임 끝 축하: 하늘색 바탕 · 곰과 스티커판이 겹치지 않게 */
.cel2{background:linear-gradient(#FAF0DB,#FFFFFF);color:var(--ink)}.cel2 h1{color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800;letter-spacing:0}
.cel2.b2 .c2-bear{display:none}
.c2-board{background:var(--pri);box-shadow:none;border-radius:22px}
.c2-coin,.c2-say{color:var(--ink)}

/* 폰 GO 단추: 칸 전체 폭 대신 오른쪽에 작게 */
@media (max-width:760px){.hgo{grid-column:2;justify-self:end;width:104px;height:46px;font-size:22px;border-radius:14px;box-shadow:0 4px 0 var(--go-d);letter-spacing:1px}.hgo img{height:34px}.hero.opened{row-gap:10px}}

.c2-board,.c2-board *{color:#fff!important;text-shadow:none!important}

/* 축하 화면 단추: 다음 게임은 진한 초록으로 또렷하게 */
.c2-btns .go{background:var(--go);box-shadow:0 5px 0 var(--go-d);color:#fff;border-radius:18px;font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}
.c2-btns .sm{background:#fff;border:var(--bw) solid var(--line);border-radius:14px;color:var(--ink);font-family:'NSR','Malgun Gothic',sans-serif;font-weight:800}
.c2-coin{border-color:var(--line)}.steps span.on{background:var(--pri)}

/* PC 쪽지 칸 줄이기 */
@media (min-width:761px){
  .hero,.hero.sealed,.hero.opened{padding:14px 24px;gap:18px;border-radius:20px;margin-bottom:18px}
  .hero.opened{grid-template-columns:auto minmax(0,1fr) 132px}
  .hero .hav,.hero .henv{width:76px;height:76px}.hero .hteach{width:58px;height:58px}.hero .henv svg{width:54px}.hero .henv .hring{width:16px;height:16px}
  .hero.sealed h1{font-size:22px}.hlab{font-size:13px;margin-bottom:2px}.h1l{font-size:16px}.h2l{font-size:22px}.hero .spk{width:40px;height:40px}
  .hgo{height:52px;font-size:25px;border-radius:15px}
}

/* 11-06 폰 쪽지 칸: 진짜 앱 크기 그대로 · 「선물!」이 다음 줄로 떨어져 칸이 커지지 않게 · 폰 화면 오른쪽 잘림 막기 */
html,body{max-width:100%;overflow-x:clip}.shell,.main,.page,.top{min-width:0;max-width:100%}
@media (max-width:760px){
  .top{overflow:hidden}.top .grow{flex:1 1 0;min-width:0}.subj{flex:0 1 auto;min-width:0}
  .h2l{white-space:nowrap;font-size:clamp(16px,5.2vw,21px)}.h1l{font-size:clamp(13.5px,4.1vw,16px)}.hbub{min-width:0}.hero.opened{column-gap:clamp(8px,3vw,12px)}
}
@media (max-width:370px){.hero .hav{width:62px;height:62px}.hero .hteach{width:48px;height:48px}.hero,.hero.sealed,.hero.opened{padding:16px 12px}.hbub .spk{width:32px;height:32px}}

/* 11-06 쪽지를 열 때 화면이 밀리거나 두 번 눌러 확대되지 않게 */
html{touch-action:manipulation}.page{overflow-anchor:none}.hero.sealed,.hero .hgo,.hero .spk{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.hero.sealed:focus{outline:none}

/* 11-06 쪽지 칸 높이 고정: 봉투일 때와 열었을 때 같은 칸 */
.hero,.hero.sealed,.hero.opened{min-height:110px;box-sizing:border-box}
@media (max-width:760px){.hero,.hero.sealed,.hero.opened{min-height:172px}}

/* 11-06 쪽지 칸 높이 조금 더 줄임(폰 150 · PC 100) */
.hero,.hero.sealed,.hero.opened{min-height:100px}
@media (min-width:761px){.hero,.hero.sealed,.hero.opened{padding:10px 24px}}
@media (max-width:760px){.hero,.hero.sealed,.hero.opened{min-height:150px;padding:12px 14px;row-gap:6px}.hero .hav,.hero .henv{width:66px;height:66px}.hero .hteach{width:50px;height:50px}.hero .henv svg{width:46px}.hero .henv .hring{width:14px;height:14px}.hgo{height:42px;font-size:21px}.hlab{margin-bottom:0}.hero.opened{row-gap:6px}}

/* 2026-11-06 색: 연한 아이보리 + 베니스 초록(와다 산조 사전 78번의 초록) */
.card,.gcard,.kpi,.claim,.day,.item,.kidrow,.plan,.bdg,.board,table.t,.word{background:#FFF8EC;border-color:#DCC592}.top{background:#F2E0BA;border-color:#F2E0BA}
nav.side,.tabbar{background:#62C6BF;border-color:#62C6BF}nav.side a,nav.side a:not(.logo),nav.side .logo.crest b,nav.side .logo.crest small,.tabbar a{color:#0E2F2D}nav.side a:hover{background:rgba(255,255,255,.35)}nav.side a.on{background:#FFF8EC;color:#1C726C}nav.side .sep{background:rgba(14,47,45,.25)}nav.side .demo{opacity:1}
.tabbar a.on{background:#FFF8EC;color:#1C726C;border-radius:12px;margin:5px 2px}.rseg a.on{background:#1C726C;border-color:#1C726C}
svg.ring circle:first-child{stroke:#DCC592}svg line[stroke="#E3EFF7"]{stroke:#DCC592}.plan.best .pic{background:#1C726C;color:#fff}div.av{color:#4F5548}
.stars .e{color:#DCC592}
/* 곰수리: 바탕은 같고 메뉴·버튼만 보라 */
body.sub-suri{--pri:#6153D4;--pri-d:#493E9F;--board:#6153D4;--lv:#6153D4;--go:#6153D4;--go-d:#493E9F}body.sub-suri nav.side,body.sub-suri .tabbar{background:#B5B1D8;border-color:#B5B1D8}body.sub-suri nav.side a,body.sub-suri nav.side a:not(.logo),body.sub-suri nav.side .logo.crest b,body.sub-suri nav.side .logo.crest small,body.sub-suri .tabbar a{color:#15142C}body.sub-suri nav.side a.on,body.sub-suri .tabbar a.on{background:#FFF8EC;color:#6153D4}body.sub-suri nav.side .sep{background:rgba(21,20,44,.25)}body.sub-suri .rseg a.on{background:#6153D4;border-color:#6153D4}

/* 2026-11-06 글꼴: 제목 카페24 써라운드 + 본문 나눔스퀘어라운드(B·EB) */
body,html.win body{font-family:'NSR','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}

/* 2026-11-06 작은 글자가 번져 보임 → 써라운드는 큰 제목에만, 메뉴·작은 제목·단추는 나눔스퀘어라운드 EB */
h1,h2,.pagehead h1,.hmsg h1,.hmsg h1 *,.side .logo.crest b,.kpi .v,.brand b,.brand b i{font-family:'Ssurround','NSR','Malgun Gothic',sans-serif}h2 .muted,h2 small,h1 .muted,h1 small{font-family:'NSR','Malgun Gothic',sans-serif;font-weight:700}

/* 2026-11-07 웰컴 편지 */
.mbox:has(.wc){width:min(600px,94vw);padding:36px 40px 30px}
.wc{display:flex;flex-direction:column;align-items:center;min-height:500px;text-align:center}
.wcspk{position:absolute;left:16px;top:14px;width:46px;height:46px;border:0;border-radius:50%;background:var(--soft);font-size:20px;cursor:pointer;z-index:30;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:none}
.wclab{font-size:14px;font-weight:800;color:var(--sub);margin-bottom:6px}
.wc h1{color:var(--ink);font-size:27px;line-height:1.3;margin:0 34px 18px;word-break:keep-all;text-wrap:balance}
.wcpic{flex:none;height:176px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;width:100%}
.wcpic:has(.wcgood){height:auto}
.wcbear{height:164px;width:164px;object-fit:contain}
.wcsum{display:flex;align-items:center;gap:12px}
.wcsum b{display:flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:20px;background:var(--soft);color:var(--ink);font-size:52px;font-weight:800}
.wcsum b.on{background:var(--pri);color:#fff}.wcsum i{font-style:normal;font-size:30px;font-weight:800;color:var(--sub)}
.wccov{display:flex;gap:14px;justify-content:center}.wccov img{width:112px;height:150px;object-fit:cover;border-radius:10px;display:block;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.wctxt{font-size:19px;line-height:1.65;color:var(--ink);margin:0 0 18px;word-break:keep-all;text-wrap:balance}
.wcgo{display:block;font-family:'Ssurround','NSR',sans-serif;font-size:26px;font-weight:400;color:var(--pri);margin-top:10px}
.wcgood{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:10px}
.wcgood li{display:flex;align-items:center;gap:14px;background:var(--soft);border-radius:16px;padding:13px 18px;text-align:left}
.wcgood span{font-size:30px;line-height:1;flex:none}.wcgood b{font-size:18px;font-weight:800;color:var(--ink);word-break:keep-all}
.wcdots{display:flex;gap:8px;margin-top:auto;margin-bottom:16px}.wcdots i{width:10px;height:10px;border-radius:50%;background:var(--line)}.wcdots i.on{background:var(--pri)}
.wcbtn{display:flex;justify-content:space-between;gap:12px;width:100%}.wcbtn .btn{flex:1;justify-content:center;margin:0}.wcbtn .btn[disabled]{opacity:.35;cursor:default}
@media (max-width:760px){.mbox:has(.wc){padding:46px 20px 22px}.wc{min-height:470px}.wc h1{font-size:22px;margin:0 30px 14px}.wcpic{height:150px;margin-bottom:14px}.wcbear{height:140px;width:140px}
  .wcsum{gap:8px}.wcsum b{width:68px;height:68px;font-size:38px;border-radius:16px}.wcsum i{font-size:22px}.wccov{gap:8px}.wccov img{width:84px;height:112px}.wctxt{font-size:16.5px;margin-bottom:14px}
  .wcgood li{padding:11px 14px;gap:10px}.wcgood span{font-size:25px}.wcgood b{font-size:15.5px}.wcgo{font-size:23px}}

/* 2026-11-07 수리 버튼 색 낮춤(감독님 「명도 다운 · 메뉴 색은 그대로 · 수리만」) — 한글은 그대로. :where 로 강도를 낮춰 흰 버튼(.btn.sub) 등 따로 칠한 버튼은 그대로 둠 */
body.sub-suri{--btn:#4A4296;--btn-d:#332D6E;--go:#4A4296;--go-d:#332D6E}
:where(body.sub-suri) .btn{background:var(--btn);box-shadow:0 4px 0 var(--btn-d)}
:where(body.sub-suri) .btn:where(:not(.sub)):hover{box-shadow:0 4px 0 var(--btn-d)}:where(body.sub-suri) .btn:where(:not(.sub)):active{box-shadow:0 1px 0 var(--btn-d)}
body.sub-suri .hero .henv,body.sub-suri .weekhead .wk{background:var(--btn)}
body.sub-suri .subj button.on,body.sub-suri .hotabs a.on,body.sub-suri .rtabs a.on,body.sub-suri .l2tabs a.on,body.sub-suri .tabs a.on,body.sub-suri .rseg a.on{background:var(--btn);border-color:var(--btn);color:#fff}

/* 11-08 부모 탭: 맨 위 봉투(홈 쪽지와 같은 모양) · 내용은 팝업 · 점수 칸 · 안쪽 보호자 확인 */
.pnote{padding:10px 20px 4px}.pnote .pnb{width:112px;height:112px;object-fit:contain;display:block;margin:0 auto 10px}.pnote .hlab{margin-bottom:6px}.pnote .h1l{margin:0}.pnote .h1l,.pnote .h2l{white-space:normal;overflow-wrap:break-word}.pnote .h2l{margin:2px 0 0;word-break:keep-all}.pnote .mbtns{position:static;background:none}
.pk6{grid-template-columns:repeat(3,minmax(0,1fr))}
.p2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-top:18px}
#pscore,#pwords{scroll-margin-top:90px}
.pgate .out{min-height:0;padding:24px 0 40px}.pgate .outbox{max-width:100%}
@media (max-height:480px){.pnote{padding:4px 40px 0}.pnote .pnb{width:64px;height:64px;margin-bottom:4px}}
@media (max-width:760px){.pnote{padding:12px 8px 4px}.pnote .pnb{width:92px;height:92px}.pk6{grid-template-columns:repeat(2,minmax(0,1fr))}.p2{grid-template-columns:minmax(0,1fr)}}

/* 11-09 감독님 「성장 노트 쪽지는 부모님께 · 봉투 디자인도 다르게」 — 아이 봉투는 초록 동그라미 */
.hero.sealed.parentmsg .henv .hring{animation-name:hringp}
@keyframes hringp{0%{box-shadow:0 0 0 0 rgba(47,62,99,.55)}100%{box-shadow:0 0 0 12px rgba(47,62,99,0)}}

/* 11-09 이용 코드 */
.codeban{display:flex;align-items:center;gap:16px;margin-bottom:18px;border-color:#E8A33D;border-width:2px}.codeban .ic{font-size:34px;flex:none}.codeban b{font-size:18px}.codeban .muted{margin-top:3px}.codeban .btn{flex:none}
.codelab{display:block;font-weight:800;margin:18px 0 8px}.codein{display:flex;gap:10px}.codein input{flex:1;min-width:0;width:auto;margin:0;font-size:20px;font-weight:800;letter-spacing:1px;padding:12px 14px;border:2px solid var(--pri);border-radius:12px;background:#fff;text-transform:uppercase}.codein input::placeholder{color:#b9ad9b;font-weight:600}.codein input.bad{border-color:var(--bad)}.codein .btn{flex:none}
.codeerr{color:var(--bad);font-weight:800;min-height:22px;margin:8px 0 2px}
@media (max-width:520px){.codeban{flex-wrap:wrap}.codeban .grow{flex:1 1 calc(100% - 60px)}.codeban .btn{width:100%}.codein input{font-size:17px}}

/* 11-09 결제 수단 */
.pmlogo{flex:none;width:58px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:#fbeccb}
.pmlogo.k{background:#fee500;color:#191600}.pmlogo.n{background:#03c75a;color:#fff}.pmlogo.v{font-size:20px}
.pmrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}.pmrow.first{border-top:0;padding-top:0}
.pmrow .t{flex:1;min-width:190px}.pmrow .acts,.pmalert .acts{display:flex;gap:8px;flex-wrap:wrap}
.pmtag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:700;background:#d8f2e2;color:#16703c}.pmtag.g{background:#e3eefc;color:#2c5a9e}
.pmnext{background:#fff;border-radius:12px;padding:11px 14px;margin-top:12px}
.pmnext b,.pmnext span{display:block}
.pmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pmcol{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pick{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 14px;font:inherit;font-weight:700;color:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.pick.on{border-color:var(--wood);background:#fff8df}.pick.off{opacity:.55;background:transparent;cursor:default}.pick:disabled{cursor:default}
.pick .nm{min-width:0}.pick .soon{margin-left:auto;font-size:12px;font-weight:500;white-space:nowrap;padding-left:8px}
.pmsub{margin:14px 0 8px;font-size:13px;font-weight:700;opacity:.7}
.pmsafe{margin:0;padding-left:18px;font-size:13px;line-height:1.7}.pmdel{color:var(--bad)}
.pmalert{background:#ffe9e4;border:2px solid #f3b9ae;border-radius:14px;padding:14px 18px;margin-bottom:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pmalert .t{flex:1;min-width:220px}.pmalert .t b{color:var(--bad)}