/* 토스트 책(리딩북·파닉스북·스토리송북·오디오북) 가벼운 보기 화면 */
html,body{margin:0;height:100%;background:#000;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#tb{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;user-select:none;-webkit-user-select:none}
.tb-stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000;font-family:"NanumSquareRound","Nanum Gothic","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
.tb-page{position:absolute;inset:0;overflow:hidden}
.tb-el{position:absolute;box-sizing:border-box}
.tb-el>img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.tb-el.contain>img{object-fit:contain}
.tb-click{cursor:pointer}
.tb-ico{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.tb-text{white-space:normal;word-break:keep-all;line-height:1.42857143;overflow:visible}
.tb-text p{margin:0}
.tb-btn{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.15;overflow:hidden}
.tb-btn .tb-bi{flex:none;object-fit:contain}
.tb-iframe{background:#000}
.tb-iframe iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.tb-iframe>div{position:absolute!important;inset:0!important;padding:0!important}
.tb-canvas{position:absolute;inset:0;touch-action:none}
/* 그림판: 크레용을 고르기 전에는 테두리 숨김·그리기 꺼짐 */
.tb-pad:not(.on){border-color:transparent!important}
/* 오디오 재생 막대 */
.tb-ap{display:flex;align-items:center;gap:10px;padding:0 10px;font:600 15px/1 -apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#111}
.tb-ap button{all:unset;cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none}
.tb-ap button svg{width:20px;height:20px;fill:currentColor}
.tb-ap .t{white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.tb-ap input{flex:1;min-width:30px;accent-color:#111;height:4px}
.tb-ap.big{font-size:20px}
.tb-ap.big button{width:34px;height:34px}.tb-ap.big button svg{width:30px;height:30px}
.tb-abtn{display:flex;align-items:center;justify-content:center;cursor:pointer}
.tb-abtn svg{width:60%;height:60%;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* 옆 화살표 */
.tb-nav{position:fixed;top:50%;width:56px;height:80px;margin-top:-40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;opacity:.95}
.tb-nav svg{width:34px;height:48px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tb-nav.prev{left:max(4px,env(safe-area-inset-left,0px))}.tb-nav.next{right:max(4px,env(safe-area-inset-right,0px))}
.tb-nav[hidden]{display:none}
/* 처음 소리 켜기 / 불러오는 중 */
.tb-start{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;pointer-events:none}
.tb-start span{display:block;white-space:nowrap;background:#fff;color:#222;border-radius:999px;padding:14px 26px;font:700 18px/1 -apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.tb-load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:15;pointer-events:none}
.tb-load i{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:tbspin .8s linear infinite}
@keyframes tbspin{to{transform:rotate(360deg)}}
/* 쪽 넘김 */
.tb-page.in-r{animation:tbinr .35s ease both}.tb-page.in-l{animation:tbinl .35s ease both}.tb-page.in-f{animation:tbfade .3s ease both}
.tb-page{z-index:1}.tb-page:last-child{z-index:2}
@keyframes tbinr{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes tbinl{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes tbfade{from{opacity:0}to{opacity:1}}
/* 토스트 애니메이션(callout.*) */
.a-tada{animation:tbtada .825s both}.a-bounce{animation:tbbounce .9s both}.a-shake{animation:tbshake .8s both}.a-flash{animation:tbflash .9s both}.a-pulse{animation:tbpulse .7s both}.a-swing{animation:tbswing .9s both}.a-drop{animation:tbdrop .6s both}
@keyframes tbtada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes tbbounce{0%,20%,53%,80%,100%{transform:none}40%,43%{transform:translateY(-24px)}70%{transform:translateY(-12px)}90%{transform:translateY(-4px)}}
@keyframes tbshake{0%,100%{transform:none}10%,30%,50%,70%,90%{transform:translateX(-8px)}20%,40%,60%,80%{transform:translateX(8px)}}
@keyframes tbflash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
@keyframes tbpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes tbswing{20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes tbdrop{from{transform:perspective(600px) rotateX(-80deg);opacity:0;transform-origin:top}to{transform:none;opacity:1}}
/* 들어오는 움직임(transition.*In) */
.a-flipx{animation:tbflipx 1s both}.a-flipbx{animation:tbflipbx 1s both}.a-sdown{animation:tbsdown .9s both}.a-sright{animation:tbsright .9s both}.a-sleft{animation:tbsleft .9s both}.a-sup{animation:tbsup .9s both}.a-fade{animation:tbfade .8s both}
@keyframes tbflipx{from{transform:perspective(400px) rotateY(90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}
@keyframes tbflipbx{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}
@keyframes tbsdown{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes tbsup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes tbsright{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes tbsleft{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* 이북(쪽 넘기기 화살표) */
.tb-eb{all:unset;position:fixed;top:50%;width:52px;height:78px;margin-top:-39px;z-index:30;cursor:pointer;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.tb-eb svg{width:34px;height:50px}
.tb-eb-prev{left:max(6px,env(safe-area-inset-left,0px))}.tb-eb-next{right:max(6px,env(safe-area-inset-right,0px))}
.tb-eb[hidden]{display:none}
.tb-eb:focus-visible,.tb-eb-x:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:8px}
.tb-eb-x{all:unset;position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:46px;height:46px;z-index:31;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.tb-eb-x svg{width:100%;height:100%}
.tb-eb-n{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:4px 12px;font:600 13px/1.2 -apple-system,"Apple SD Gothic Neo",sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
/* 팝업 쪽 */
.tb-pop{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.45)}
.tb-pop.nomodal{background:transparent}
.tb-pop-box{position:absolute;left:50%;top:50%;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.45);transform-origin:center}
.tb-pop-hd{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:center;justify-content:center;font:700 17px/1 "NanumSquareRound","Nanum Gothic","Apple SD Gothic Neo",sans-serif;background:#f3f3f3;color:#333;border-bottom:1px solid #ddd}
.tb-pop-x{all:unset;position:absolute;right:6px;top:3px;width:30px;height:30px;font-size:28px;line-height:28px;text-align:center;cursor:pointer;color:#555}
.tb-pop-body{position:absolute;left:0;right:0;overflow:hidden}
.tb-movie video{outline:none}
.tb-mv-x{all:unset;position:absolute;top:10px;right:10px;width:64px;height:64px;z-index:20;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.tb-movie:not(.fs) .tb-mv-x{display:none}   /* 닫기는 화면 가득 영상일 때만 (작은 영상 쪽은 책의 버튼 사용) */
.tb-mv-x svg{width:100%;height:100%}
.tb-mv-ui{position:absolute;inset:0;z-index:10;pointer-events:none}
.tb-mv-big{all:unset;pointer-events:auto;position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tb-mv-big svg{width:52px;height:52px;fill:#fff;margin-left:6px}
.tb-mv-big[hidden]{display:none}
.tb-mv-bar{pointer-events:auto;position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font:600 18px/1 -apple-system,"Apple SD Gothic Neo",sans-serif;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s}
.tb-mv-ui.on .tb-mv-bar{opacity:1}
.tb-mv-bar button{all:unset;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.tb-mv-bar button svg{width:30px;height:30px;fill:#fff}
.tb-mv-bar input{flex:1;min-width:40px;accent-color:#f7a21b;height:6px}
.tb-mv-bar .t{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tb-page,[class*="a-"]{animation:none!important}}

/* 투명 누름 상자(Link) · 영상 팝업(PopupMovie) */
.tb-link{cursor:pointer}.tb-link:hover{background:var(--hc,transparent)}
.tb-pmv .tb-pop-box iframe,.tb-pmv .tb-pop-box video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tb-pmv .tb-pmv-x{display:block}

/* 활동 끝났어요: 칭찬 화면 · 완료 도장 */
.tb-good{background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tb-good-in{display:flex;flex-direction:column;align-items:center;gap:6px;animation:tbGood .5s cubic-bezier(.2,1.6,.4,1)}
.tb-good-in img{width:300px;max-width:60%;height:auto}
.tb-good-in b{font:900 44px/1.1 "NanumSquareRound","Nanum Gothic","Apple SD Gothic Neo",sans-serif;color:#fff;-webkit-text-stroke:2px #e8457c;text-shadow:0 4px 0 #e8457c}
@keyframes tbGood{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.tb-stamp{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:50%;background:#e8457c;color:#fff;font:900 24px/34px sans-serif;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.3);pointer-events:none;animation:tbGood .4s cubic-bezier(.2,1.6,.4,1)}

/* 교실영어: 들은 활동 단추 색칠 */
.tb-visited::after{content:"";position:absolute;left:4%;right:4%;top:6%;bottom:4%;border-radius:40%;background:rgba(255,196,0,.62);mix-blend-mode:multiply;pointer-events:none;animation:tbGood .4s ease-out}
.tb-visited::before{content:"✓";position:absolute;right:-2px;top:-4px;width:22px;height:22px;border-radius:50%;background:#ff9800;color:#fff;font:900 15px/22px sans-serif;text-align:center;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* 그 주 완료 (끝냈어요) */
.tb-week-done{position:absolute;border:4px solid #ff9800;border-radius:30px;box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 18px rgba(255,152,0,.7);pointer-events:none;animation:tbGood .45s ease-out}
.tb-stamp-big{position:absolute;inset:4%;border-radius:50%;background:#e8457c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.75);pointer-events:none;animation:tbGood .45s cubic-bezier(.2,1.6,.4,1)}
.tb-stamp-big b{font:900 20px/1 "NanumSquareRound","Nanum Gothic","Apple SD Gothic Neo",sans-serif;letter-spacing:1px}
.tb-stamp-big i{font:900 18px/1 sans-serif;font-style:normal;margin-top:2px}

/* 스토리파닉스 데일리: 스마트북 아이콘을 지금 사이트 썸네일로 */
.tb-smart-ico{position:absolute!important;left:0!important;top:5px!important;width:50px!important;height:50px!important;max-width:none!important;object-fit:cover;object-position:50% 50%;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);background:#6e8f34;pointer-events:none}

/* 데일리키즈 교사자료실(단계별) — 기기에 맞춘 화면 */
html:has(.tm-body),body.tm-body{overflow:auto;height:auto;min-height:100%;background:#eef3e2;touch-action:auto}
body.tm-body #tb{position:static;display:block;background:transparent;user-select:auto;-webkit-user-select:auto}
.tm{min-height:100vh;font-family:"NanumSquareRound","Nanum Gothic","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color:#2c3a12}
.tm-hd{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:#075a8f;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tm-logo{height:30px;width:auto}
.tm-hd h1{flex:1;margin:0;text-align:center;font-size:clamp(19px,3.2vw,28px);font-weight:900;letter-spacing:-.3px}
.tm-x{all:unset;cursor:pointer;width:46px;height:46px;flex:none}.tm-x svg{width:100%;height:100%;display:block}
.tm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1100px;margin:18px auto 0;padding:0 16px}
.tm-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;padding:12px 8px;border-radius:16px;background:#fff;color:#5d7320;border:3px solid #cddb9f;text-align:center;box-shadow:0 3px 0 #cddb9f;transition:transform .12s,background .15s}
.tm-tab b{font-size:17px;font-weight:900;line-height:1.25;word-break:keep-all}
.tm-ti{font-size:28px;line-height:1}
.tm-tab:hover{transform:translateY(-2px)}
.tm-tab.on{background:#9bb03f;border-color:#7d9128;color:#fff;box-shadow:0 3px 0 #63741d}
.tm-main{max-width:1100px;margin:0 auto;padding:18px 16px 40px}
.tm-sec{display:none;background:#fff;border-radius:18px;padding:18px;box-shadow:0 4px 18px rgba(80,100,20,.12)}
.tm-sec.on{display:block}
.tm-sec h2{margin:0 0 14px;font-size:21px;font-weight:900;color:#4e6216}.tm-sec h2 small{font-size:15px;color:#8a9a5b;font-weight:700}
.tm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tm-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:12px 6px;border-radius:14px;background:#9bb03f;color:#fff;text-decoration:none;box-shadow:0 4px 0 #6f8424;transition:transform .1s,box-shadow .1s;text-align:center}
.tm-btn b{font-size:17px;font-weight:900;letter-spacing:.2px;word-break:keep-all}
.tm-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6f8424}
.tm-btn:hover{background:#8ca033}
.tm-dl{width:34px;height:34px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14v-2H5v2zm7-3 6-6h-4V3h-4v8H6l6 6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14v-2H5v2zm7-3 6-6h-4V3h-4v8H6l6 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.tm-btn.tm-all{grid-column:1/-1;flex-direction:row;min-height:0;height:64px;padding:0 12px;background:#075a8f;box-shadow:0 4px 0 #04395b}
.tm-btn.tm-all:hover{background:#0a669f}.tm-btn.tm-all:active{box-shadow:0 1px 0 #04395b}
@media (max-width:900px){.tm-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.tm-tabs{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.tm-tab{min-height:74px;flex-direction:row;gap:8px}.tm-tab b{font-size:15px}.tm-ti{font-size:22px}
  .tm-grid{grid-template-columns:repeat(3,1fr);gap:9px}.tm-btn{min-height:84px}.tm-btn b{font-size:15px}.tm-dl{width:28px;height:28px}.tm-logo{height:22px}.tm-x{width:40px;height:40px}.tm-sec{padding:14px}.tm-main{padding:12px 12px 32px}}