@import url('fonts.css');
:root{
  --ink:#14181E; --dim:#79828C; --line:#ECE7DE; --cream:#FFFDF8; --soft:#F1EDE4;
  --c:#E8632D; --ok:#2EA043;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(11px, 0.9vw + 4px, 17px)}
html,body{height:100%;overflow:hidden}
body{font-family:'Jua','Noto Sans KR','Apple SD Gothic Neo',sans-serif;color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{-webkit-user-drag:none}
.scr{position:fixed;inset:0;display:none;flex-direction:column;background:var(--cream)}
.scr.on{display:flex}

/* 공통 윗줄 */
.top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.2rem 0}
.who{display:flex;align-items:center;gap:.85rem}
.av{width:3.2rem;height:3.2rem;border-radius:1.05rem;background:var(--c);color:#fff;display:grid;place-items:center;
  font-size:1.55rem;transform:rotate(-5deg)}
.who b{display:block;font-size:1.75rem;font-weight:400;line-height:1.1}
.who span{display:block;font-family:'Nunito';font-weight:800;font-size:.72rem;letter-spacing:.14rem;color:#A6ADB4;margin-top:.15rem}
.rbtn{width:3.1rem;height:3.1rem;border-radius:50%;background:var(--soft);display:grid;place-items:center;
  font-size:1.35rem;color:var(--dim)}

/* ---------- 이번 주 방 ---------- */
.wkhd{flex:none;padding:1.15rem 2.2rem 0;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.wkhd b{display:block;font-size:2.35rem;font-weight:400;line-height:1.1}
.wkhd .s{display:block;margin-top:.3rem;font-size:1.2rem;color:var(--dim)}
.wkhd .r{text-align:right;font-size:1.1rem;color:var(--dim);white-space:nowrap}
.wkhd .r u{text-decoration:none;display:block;color:var(--c);font-size:1.75rem}
.bar{flex:none;margin:.95rem 2.2rem 0;height:1rem;border-radius:100px;background:#EDE8DE;overflow:hidden}
.bar i{display:block;height:100%;background:var(--c);border-radius:100px;transition:width .5s}
.tiles{flex:1 1 auto;min-height:0;padding:1rem 2.2rem 1.35rem;display:grid;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:max-content;align-content:start;gap:1.25rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tile{position:relative;background:#fff;border:3px solid var(--line);border-radius:1.55rem;overflow:hidden;min-height:max-content;   /* overflow:hidden이면 그리드가 카드를 눌러 찌그러뜨림 → 내용 높이 보장 */
  display:flex;flex-direction:column;text-align:left;transition:transform .12s}
.tile:active{transform:scale(.97)}
.tile .im{position:relative;flex:none;aspect-ratio:16/9;background:#EDE8DE}
.tile .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile .bd{flex:none;padding:.8rem .95rem .95rem}
.tile .t{font-size:1.35rem;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .lr{margin-top:.35rem;font-size:.9rem;color:#8A9299;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .ck{position:absolute;right:.8rem;bottom:-1.35rem;width:2.7rem;height:2.7rem;border-radius:50%;background:#fff;
  border:3px solid var(--line);display:grid;place-items:center;font-size:1.2rem;color:#D3D7DC;z-index:2}
.tile.done .ck{background:var(--ok);border-color:var(--ok);color:#fff}
.tile.done .im img{filter:saturate(.7)}
.tile .pc{position:absolute;left:.65rem;top:.65rem;background:#14181ECC;color:#fff;border-radius:100px;
  padding:.2rem .7rem;font-family:'Nunito';font-weight:800;font-size:.8rem;z-index:2}
.tile.e{visibility:hidden}

.lockbar{flex:none;background:#F6F2EA;border-top:3px solid var(--line);padding:1.15rem 2.2rem;display:flex;align-items:center;gap:1rem}
.lockbar .ic{flex:none;width:3.2rem;height:3.2rem;border-radius:1.05rem;background:#E3DDD1;display:grid;place-items:center;font-size:1.45rem}
.lockbar b{display:block;font-size:1.35rem;font-weight:400}
.lockbar span{display:block;margin-top:.2rem;font-size:1.02rem;color:var(--dim)}
.wkrow{flex:none;background:transparent;padding:.8rem 2.2rem 0;display:flex;gap:.6rem;
  overflow-x:auto;scrollbar-width:none}
.wkrow::-webkit-scrollbar{display:none}
.wkc{flex:none;padding:.65rem 1.15rem;border-radius:100px;background:#fff;border:2px solid var(--line);font-size:1.05rem;color:#55606B;white-space:nowrap}
.wkc.on{background:var(--c);border-color:var(--c);color:#fff}

.lockbar .grow{flex:1 1 auto;min-width:0}
.favbtn{flex:none;display:flex;align-items:center;gap:.6rem;background:#fff;border:3px solid #F5C542;border-radius:100px;
  padding:.7rem 1.3rem .7rem .9rem;font-size:1.25rem;color:#8A6400}
.favbtn i{font-style:normal;width:2.3rem;height:2.3rem;border-radius:50%;background:#F5C542;display:grid;place-items:center;font-size:1.15rem}
.favbtn u{text-decoration:none;font-family:'Nunito';font-weight:800;font-size:1rem;background:#FFF4CC;border-radius:100px;padding:.1rem .6rem}
.wkc.all{background:#14181E;border-color:#14181E;color:#fff}
.wkc.all.on{background:var(--c);border-color:var(--c)}
.wkc.fav{background:#FFF4CC;border-color:#F5C542;color:#8A6400}
.wkc.fav.on{background:#F5C542;border-color:#F5C542;color:#fff}
.backbtn{flex:none;display:flex;align-items:center;gap:.5rem;background:var(--soft);border-radius:100px;padding:.75rem 1.3rem;font-size:1.15rem;color:#55606B}
.tile .st{position:absolute;left:.65rem;top:.65rem;width:2.2rem;height:2.2rem;border-radius:50%;background:#F5C542;
  color:#fff;display:grid;place-items:center;font-size:1.05rem;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.18)}

/* 엄마: 좋아하는 노래 고르기 */
.favsum{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#FFFBEA;border:2px solid #F7E3A1;
  border-radius:1.1rem;padding:.85rem 1rem}
.favsum .th{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem}
.favsum .th img{width:100%;height:auto;aspect-ratio:16/10;border-radius:.45rem;object-fit:cover;background:#EDE8DE}
.favsum .th em{width:100%;aspect-ratio:16/10;border-radius:.45rem;border:2px dashed #E9D58E}
.favsum button{flex:none;background:#F5C542;color:#fff;border-radius:100px;padding:.6rem 1.15rem;font-size:1.05rem}
.pick{background:#fff;border-radius:2rem;width:min(52rem,100%);max-height:92dvh;display:flex;flex-direction:column;overflow:hidden}
.pick .ph{flex:none;padding:1.6rem 2rem 1rem;border-bottom:2px solid #F3EFE7}
.pick .ph h3{font-size:1.75rem;font-weight:400}
.pick .ph .sub{margin-top:.3rem;font-size:1rem;color:var(--dim)}
.pick .ph .cnt{margin-top:.8rem;display:flex;gap:.4rem;flex-wrap:wrap}
.pick .ph .cnt span{width:1.6rem;height:1.6rem;border-radius:50%;background:#F1EDE4;display:grid;place-items:center;font-size:.85rem;color:#C8CDD3}
.pick .ph .cnt span.on{background:#F5C542;color:#fff}
.pick .pl{flex:1 1 auto;overflow-y:auto;padding:.4rem 2rem 1rem}
.pick .gh{margin-top:1rem;font-size:1.05rem;color:var(--gc);display:flex;align-items:center;gap:.5rem}
.pick .gh:before{content:'';width:.7rem;height:.7rem;border-radius:50%;background:var(--gc)}
.pick .rows{margin-top:.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.pick .r{display:flex;align-items:center;gap:.75rem;padding:.45rem .55rem;border-radius:1rem;border:2px solid #F1EDE4;text-align:left}
.pick .r img{width:4.6rem;height:2.9rem;border-radius:.55rem;object-fit:cover;flex:none;background:#EDE8DE}
.pick .r b{flex:1 1 auto;min-width:0;font-size:1.02rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .r i{flex:none;font-style:normal;width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid #E3DDD1;display:grid;place-items:center;
  font-size:1rem;color:#D3D7DC}
.pick .r.on{border-color:#F5C542;background:#FFFBEA}
.pick .r.on i{background:#F5C542;border-color:#F5C542;color:#fff}
.pick .r.full{opacity:.4}
.pick .pf{flex:none;padding:1rem 2rem 1.4rem;border-top:2px solid #F3EFE7;display:flex;gap:.7rem}
.pick .pf button{flex:1;padding:.95rem;border-radius:1.1rem;font-size:1.15rem}
.pick .pf .go{background:var(--c);color:#fff}
.pick .pf .gh2{background:var(--soft)}

/* 엄마: 같이 쓰면 좋은 것 */
.goods{margin-top:1.6rem;border-top:2px dashed #ECE7DE;padding-top:1.3rem}
.goods.first{margin-top:1rem;border-top:0;padding:.7rem .7rem .55rem;background:#FAF8F3;border-radius:1.1rem}
.goods.first .cpb{margin-top:0}
.goods.first .disc{margin-top:.45rem;text-align:center}
.cpb{margin-top:.8rem;display:none}
.cpb.on{display:block}
.cpb iframe{width:100%;border:0;display:block;border-radius:.8rem;background:#fff}
.goods>b{display:block;font-size:1.15rem;font-weight:400}
.goods>small{display:block;margin-top:.2rem;font-size:.9rem;color:var(--dim)}
.gl{margin-top:.85rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.gi{color:inherit;text-decoration:none;display:flex;flex-direction:column;border:2px solid #ECE7DE;border-radius:1.2rem;overflow:hidden;text-align:left;background:#fff}
.gi .gp{height:6.4rem;display:grid;place-items:center;font-size:3.3rem;background:var(--gb)}
.gi .gx{padding:.8rem .95rem .9rem}
.gi .gx b{display:block;font-size:1.08rem;font-weight:400}
.gi .gx span{display:block;margin-top:.3rem;font-size:.85rem;color:var(--dim);line-height:1.4}
.gi .gx u{text-decoration:none;display:inline-block;margin-top:.65rem;background:#14181E;color:#fff;border-radius:100px;
  padding:.38rem .9rem;font-size:.85rem}
.disc{margin-top:.75rem;font-size:.78rem;color:#A6ADB4;line-height:1.5}

/* ---------- 재생 ---------- */
#play{background:#14181E;color:#fff}
#play .who b{color:#fff}
#play .rbtn{background:#ffffff1A;color:#fff}
.pwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:1rem 2.2rem 1.4rem}
.pbox{position:relative;width:min(100%, calc((100dvh - 15.5rem) * 16 / 9));aspect-ratio:16/9;border-radius:1.4rem;
  overflow:hidden;background:#000;flex:none}
.pbox iframe,.pbox #yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.pinfo{margin-top:1.15rem;width:min(100%, calc((100dvh - 15.5rem) * 16 / 9));display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pt{font-size:2.1rem;line-height:1.05}
.pk{margin-top:.35rem;font-size:1.15rem;color:#ffffffAA}
.plr{margin-top:.5rem;font-size:1rem;color:#ffffffCC}
.plr i{font-style:normal;font-family:'Nunito';font-weight:800;font-size:.7rem;letter-spacing:.1rem;color:var(--c);margin-right:.6rem}
.pbtns{flex:none;display:flex;gap:.9rem}
.pb{width:6.4rem;height:6.4rem;border-radius:1.7rem;background:var(--c);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:2.4rem;line-height:1}
.pb span{font-size:.95rem;margin-top:.45rem}
.pb.g{background:#ffffff1F}

/* 크게 보기 */
.tbtns{display:flex;align-items:center;gap:.7rem}
.bigbtn{height:3.1rem;padding:0 1.2rem;border-radius:100px;background:#ffffff1A;color:#fff;font-size:1.1rem}
.fctl{display:none}
#play.big .top,#play.big .pinfo{display:none}
#play.big{background:#000}
#play.big .pwrap{padding:0;justify-content:center}
#play.big .pbox{width:min(100vw, 100dvh * 16 / 9);border-radius:0}
#play.big .fctl{display:flex;position:fixed;top:.8rem;right:.8rem;gap:.5rem;z-index:5}
#play.big .fctl button{height:2.6rem;padding:0 1rem;border-radius:100px;background:#ffffff26;color:#fff;font-size:1rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* 세로 폰에서 크게 보기: 영상을 90도 눕혀 화면 꽉 채우기 */
#play.big.rot .pbox{position:fixed;left:50%;top:50%;width:100dvh;height:100vw;max-width:none;aspect-ratio:auto;
  transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
#play.big.rot .fctl{top:auto;left:auto;right:.6rem;bottom:.6rem;flex-direction:column}
#play.big.rot .fctl button{transform:rotate(90deg);width:3.2rem;height:3.2rem;padding:0;font-size:.8rem}

/* ---------- 끝 ---------- */
#end .body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 2rem 2.5rem}
.star{font-size:6rem;line-height:1;animation:pop .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{0%{transform:scale(.2) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.eh{margin-top:1rem;font-size:4.2rem;line-height:1.05;text-align:center}
.es{margin-top:.5rem;font-size:1.5rem;color:var(--dim);text-align:center}
.eb{margin-top:2.6rem;display:flex;gap:1.6rem;align-items:stretch}
.ec{border-radius:1.8rem;overflow:hidden;transition:transform .12s}
.ec:active{transform:scale(.97)}
.ec.again{width:14rem;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.ec.again .ei{font-size:4.4rem;color:#55606B;line-height:1}
.ec.again b{font-size:1.6rem;font-weight:400;color:#39414B}
.ec.next{width:25rem;background:var(--c);color:#fff;text-align:left}
.ec.next .im{width:100%;aspect-ratio:16/9;background:#0002}
.ec.next img{width:100%;height:100%;object-fit:cover;display:block}
.ec.next .tx{padding:1rem 1.3rem 1.15rem}
.ec.next span{display:block;font-size:1rem;color:#ffffffCC}
.ec.next b{display:block;margin-top:.2rem;font-size:1.75rem;font-weight:400;line-height:1.1}
.ec.next.all{background:var(--ok)}
.ehome{margin-top:2.2rem;font-size:1.15rem;color:#A6ADB4;padding:.6rem 1.2rem}

/* ---------- 엄마 문 / 설정 ---------- */
.dim{position:fixed;inset:0;background:#14181E99;display:none;align-items:center;justify-content:center;z-index:20;padding:1.5rem}
.dim.on{display:flex}
.gate{background:#fff;border-radius:2rem;padding:2.2rem 2.4rem;width:min(30rem,100%);text-align:center}
.gate h3{font-size:1.6rem;font-weight:400}
.gate p{margin-top:.5rem;font-size:1.05rem;color:var(--dim)}
.gate .q{margin-top:1.3rem;font-size:3rem}
.gate .ans{margin-top:1.3rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.gate .ans button{height:4.2rem;border-radius:1.2rem;background:var(--soft);font-size:1.8rem}
.gate .x{margin-top:1.3rem;font-size:1rem;color:var(--dim)}

.set{background:#fff;border-radius:2rem;width:min(44rem,100%);max-height:92dvh;overflow-y:auto;padding:2rem 2.2rem 1.6rem}
.set h3{font-size:1.9rem;font-weight:400}
.set .sub{margin-top:.35rem;font-size:1rem;color:var(--dim)}
.fld{margin-top:1.4rem}
.fld>label{display:block;font-size:.95rem;color:var(--dim);margin-bottom:.55rem}
.fld input[type=text]{width:100%;border:2px solid var(--line);border-radius:1rem;padding:.8rem 1rem;font-size:1.2rem;
  background:var(--cream);font-family:inherit;user-select:text;-webkit-user-select:text}
.fld input[type=text]:focus{outline:0;border-color:var(--c)}
.chs{display:flex;flex-wrap:wrap;gap:.55rem}
.ch{padding:.6rem 1.05rem;border-radius:100px;border:2px solid var(--line);background:#fff;font-size:1.05rem;color:#55606B}
.ch.on{background:var(--cc,var(--c));border-color:var(--cc,var(--c));color:#fff}
.wl{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:.55rem;max-height:15rem;overflow-y:auto;padding:.1rem}
.wl button{text-align:left;padding:.65rem .9rem;border-radius:.9rem;border:2px solid var(--line);background:#fff;font-size:1rem;line-height:1.25}
.wl button small{display:block;font-size:.8rem;color:var(--dim)}
.wl button.on{border-color:var(--c);background:#FFF4EE}
.wl button.part{border-color:var(--c);border-style:dashed;background:#FFFAF6}
.fld .one{margin-top:.6rem;width:100%;padding:.75rem;border-radius:.9rem;border:2px solid var(--line);background:#fff;font-size:1.05rem;color:#55606B}
#tiles.many{grid-template-rows:none;grid-auto-rows:max-content;overflow-y:auto;align-content:start;-webkit-overflow-scrolling:touch}
#tiles.many .tile{height:auto}
.gdv{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;font-size:1.15rem;color:var(--gc);padding:.4rem .2rem 0}
.gdv:after{content:'';flex:1;height:2px;background:var(--gc);opacity:.25;border-radius:2px}
.pick .gb{width:100%;justify-content:flex-start;border:2px solid #F1EDE4;border-radius:1rem;padding:.55rem .8rem;background:#fff;text-align:left}
.pick .gb span{margin-left:auto;font-size:.85rem;color:#8A9299}
.pick .gb.all{background:var(--gc);color:#fff;border-color:var(--gc)}
.pick .gb.all:before{background:#fff}
.pick .gb.all span{color:#ffffffDD}
.pick .gb.part{border-color:var(--gc);border-style:dashed}
.pick.sel .r.on{border-color:var(--c);background:#FFF4EE}
.pick.sel .r.on i{background:var(--c);border-color:var(--c)}
.pc2{font-size:1.05rem;font-weight:400;color:var(--c)}
.tg{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid #F3EFE7;font-size:1.1rem}
.tg small{display:block;font-size:.85rem;color:var(--dim);margin-top:.15rem}
.sw{flex:none;width:3.4rem;height:2rem;border-radius:100px;background:#DCD6CA;position:relative;transition:.15s}
.sw:after{content:'';position:absolute;left:.25rem;top:.25rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--ok)}
.sw:focus{outline:none}
.sw:focus-visible{outline:3px solid #F5C54288}
.wkc .now{font-size:.75rem;background:#ffffff55;border-radius:100px;padding:.05rem .45rem;margin-left:.25rem}
.wkc:not(.on) .now{background:#F1EDE4;color:#8A9299}
.sw.on:after{left:1.65rem}
.sbtns{margin-top:1.6rem;display:flex;gap:.7rem}
.sbtns button{flex:1;padding:1rem;border-radius:1.1rem;font-size:1.2rem}
.sbtns .go{background:var(--c);color:#fff}
.sbtns .gh{background:var(--soft)}
.clr{margin-top:.9rem;font-size:.9rem;color:#B0B6BC;text-decoration:underline;width:100%}

.opn{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opn button{text-align:left;padding:.9rem 1rem;border-radius:1.1rem;border:2px solid var(--line);background:#fff}
.opn b{display:block;font-size:1.1rem;font-weight:400}
.opn span{display:block;margin-top:.3rem;font-size:.85rem;color:var(--dim);line-height:1.35}
.opn button.on{border-color:var(--c);background:#FFF4EE}

.tile .seen{position:absolute;right:.6rem;bottom:.6rem;z-index:2;background:#2EA043;color:#fff;border-radius:100px;
  padding:.25rem .75rem;font-size:.9rem;box-shadow:0 3px 8px rgba(0,0,0,.18)}

/* ---------- 좁은 화면 (폰 세로) ---------- */
@media (max-width:760px){
  .favsum .th{grid-template-columns:repeat(4,1fr)}
  .opn{grid-template-columns:1fr}
  .pick .rows{grid-template-columns:1fr}
  .lockbar{flex-wrap:wrap}
  html,body{height:auto;overflow:visible}
  #home.on{position:static;min-height:100dvh}
  #home .tiles{flex:none}
  .tiles{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:max-content}
  .tiles .tile,#tiles.many .tile{height:auto}
  #tiles.many{overflow:visible}
  .wkhd{flex-direction:row;align-items:center;padding-top:.6rem}
  .wkhd b{font-size:1.7rem}
  .wkhd .s{display:none}
  .allbtn{font-size:1rem;padding:.5rem .9rem;border-radius:.9rem}
  .allbtn small{font-size:.66rem}
  .pinfo{flex-direction:column;align-items:stretch}
  .pbtns{justify-content:stretch}
  .pb{flex:1;height:5rem}
  .eb{flex-direction:column;width:100%;max-width:25rem}
  .ec.again,.ec.next{width:100%}
  .ec.again{padding:1.2rem}
}
img.av{background:none;object-fit:cover;display:block;border-radius:1.05rem}

/* 엄마 설정 버튼 */
.setbtn{flex:none;display:flex;align-items:center;gap:.45rem;height:3.1rem;padding:0 1.1rem 0 .9rem;border-radius:100px;
  background:var(--soft);color:#55606B;font-size:1.05rem;white-space:nowrap}
.setbtn i{font-style:normal;font-size:1.25rem}
@media (max-height:560px) and (orientation:landscape){ .setbtn{height:2.5rem;font-size:.95rem;padding:0 .9rem 0 .7rem} }

/* 홈 화면에 추가 띠 */
.ibar{position:fixed;left:.8rem;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:.8rem;
  background:#14181E;color:#fff;border-radius:1.2rem;padding:.8rem .8rem .8rem 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.28);
  animation:ibup .35s ease-out both}
@keyframes ibup{from{transform:translateY(140%)}to{transform:none}}
.ib-t{flex:1 1 auto;min-width:0}
.ib-t b{display:block;font-size:1.1rem;font-weight:400}
.ib-t span{display:block;margin-top:.2rem;font-size:.9rem;color:#ffffffBB;line-height:1.4}
.ib-t u{text-decoration:none;color:#FFC34A}
.ib-go{flex:none;background:var(--c);color:#fff;border-radius:100px;padding:.65rem 1.1rem;font-size:1rem;text-decoration:none;white-space:nowrap}
.ib-x{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:#ffffff1A;color:#fff;font-size:.95rem}

/* 전체 듣기 / 꾹 눌러 고르기 */
.allbtn{background:var(--c);color:#fff;border-radius:1.2rem;padding:.75rem 1.3rem;font-size:1.35rem;text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.14);white-space:nowrap}
.allbtn small{display:block;font-size:.78rem;opacity:.85;margin-top:.15rem}
.tile .pk{display:none}
#tiles.selmode .tile .pk{display:grid;place-items:center;position:absolute;left:.6rem;top:.6rem;z-index:3;width:2.4rem;height:2.4rem;
  border-radius:50%;background:#ffffffE6;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);font-family:'Nunito';font-weight:800;font-size:1.1rem;color:#fff}
#tiles.selmode .tile.sel .pk{background:var(--c)}
#tiles.selmode .tile{transform:scale(.96);transition:transform .12s}
#tiles.selmode .tile.sel{transform:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c)}
.selbar{flex:none;background:#14181E;color:#fff;padding:1rem 1.4rem;display:flex;align-items:center;gap:.8rem}
.selbar .grow{flex:1 1 auto;min-width:0}
.selbar b{display:block;font-size:1.3rem;font-weight:400}
.selbar span{display:block;margin-top:.2rem;font-size:.9rem;color:#ffffffAA}
.sb-x{background:#ffffff1F;color:#fff;border-radius:100px;padding:.75rem 1.2rem;font-size:1.05rem}
.sb-go{background:var(--c);color:#fff;border-radius:100px;padding:.75rem 1.4rem;font-size:1.15rem;white-space:nowrap}
.eauto{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;font-size:1.2rem;color:#55606B}
.eauto:empty{display:none}
.eauto button{background:#F1EDE4;border-radius:100px;padding:.55rem 1.1rem;font-size:1rem;color:#55606B}
@media (max-width:760px){
  .allbtn{font-size:1.15rem;padding:.65rem 1.1rem}
  .selbar{flex-wrap:wrap}
}

/* ---------- 폰 가로 (키가 낮은 화면) ---------- */
@media (max-height:560px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  #home.on{position:fixed;min-height:0}
  .top{padding:.6rem 1.4rem 0}
  .av{width:2.4rem;height:2.4rem;font-size:1.2rem;border-radius:.8rem}
  img.av{border-radius:.8rem}
  .who b{font-size:1.35rem}
  .who span{font-size:.62rem}
  .rbtn{width:2.5rem;height:2.5rem;font-size:1.1rem}
  .wkhd{padding:.4rem 1.4rem 0;flex-direction:row;align-items:center}
  .wkhd b{font-size:1.6rem}
  .wkhd .s{font-size:.95rem;margin-top:.1rem}
  .allbtn{font-size:1.1rem;padding:.5rem 1rem}
  .allbtn small{font-size:.7rem}
  /* 카드는 아래로 내려서 보기 */
  .tiles,#tiles.many{grid-template-columns:repeat(4,1fr);grid-template-rows:none;grid-auto-rows:max-content;overflow-y:auto;
    align-content:start;padding:.5rem 1.4rem .8rem;gap:.6rem;-webkit-overflow-scrolling:touch}
  .tiles .tile,#tiles.many .tile{height:auto;border-width:2px;border-radius:1rem}
  .tile .bd{padding:.4rem .6rem .5rem}
  .tile .t{font-size:.98rem;-webkit-line-clamp:1}
  .tile .lr{font-size:.74rem;margin-top:.15rem;-webkit-line-clamp:1;min-height:0}
  .tile .seen,.tile .len{font-size:.68rem;padding:.12rem .45rem;right:.45rem;bottom:.45rem}
  .tile .len{left:.45rem;right:auto}
  .wkhd .s{display:none}
  .who span{display:none}
  .wkc{padding:.4rem .85rem;font-size:.9rem}
  .top{padding:.45rem 1.4rem 0}
  .wkhd{padding:.25rem 1.4rem 0}
  .wkhd b{font-size:1.35rem}
  .allbtn{font-size:1rem;padding:.4rem .9rem;border-radius:.9rem}
  .allbtn small{font-size:.65rem}
  .tile.e{display:none}
  #home .tiles{flex:1 1 auto;min-height:0}            /* 폰 세로 규칙(flex:none)이 덮어쓰지 않게 */
  #tiles.many{overflow-y:auto}
  .lockbar{padding:.5rem 1.4rem}
  .wkrow{padding:.4rem 1.4rem 0}
  .lockbar .ic{width:2.2rem;height:2.2rem;font-size:1.1rem}
  .lockbar b{font-size:1.1rem}
  .lockbar span{font-size:.85rem}
  .selbar{padding:.5rem 1.4rem}
  /* 재생: 영상 왼쪽, 정보 오른쪽 */
  #play .top{padding:.5rem 1.4rem 0}
  .pwrap{flex-direction:row;align-items:center;justify-content:center;gap:1.4rem;padding:.4rem 1.4rem .7rem}
  .pbox{width:min(64vw, calc((100dvh - 5rem) * 16 / 9))}
  .pinfo{margin-top:0;width:auto;max-width:30vw;flex-direction:column;align-items:flex-start;gap:.8rem}
  .pt{font-size:1.6rem}
  .pb{width:4.6rem;height:4.6rem;font-size:1.8rem;border-radius:1.2rem}
  .pb span{font-size:.8rem}
  /* 끝 화면: 한 화면에 다 보이게 */
  #end .body{overflow-y:auto;justify-content:center;padding:.6rem 1.4rem}
  .star{font-size:2.6rem}
  .eh{margin-top:.3rem;font-size:2.2rem}
  .es{margin-top:.2rem;font-size:1rem}
  .eb{margin-top:.9rem;flex-direction:row;width:auto;max-width:none;gap:1rem}
  .ec.again{width:9rem;padding:0}
  .ec.again .ei{font-size:2.6rem}
  .ec.again b{font-size:1.2rem}
  .ec.next{width:16rem}
  .ec.next .im{aspect-ratio:16/8}
  .ec.next .tx{padding:.5rem .9rem .6rem}
  .ec.next b{font-size:1.2rem}
  .ec.next span{font-size:.8rem}
  .eauto{margin-top:.6rem;font-size:1rem}
  .ehome{margin-top:.3rem;padding:.3rem 1rem}
}

@media (max-height:560px) and (orientation:landscape) and (min-width:820px){ .tiles,#tiles.many{grid-template-columns:repeat(5,1fr)} }

/* 태블릿 세로: 3칸 */
@media (min-width:761px) and (max-width:1000px) and (orientation:portrait){ .tiles,#tiles.many{grid-template-columns:repeat(3,1fr)} }

/* 찾기 */
.hr{display:flex;align-items:center;gap:.55rem;flex:1 1 auto;min-width:0;justify-content:flex-end;margin-left:1rem}
.sbox{display:none;align-items:center;gap:.4rem;flex:1 1 auto;min-width:0;max-width:26rem;height:3.1rem;padding:0 .5rem 0 .9rem;border-radius:100px;background:#fff;border:2px solid var(--line)}
.sbox.on{display:flex}
.sbox i{font-style:normal;font-size:1.05rem;flex:none}
.sbox input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:1.05rem;color:inherit;outline:none}
.sbox input::placeholder{color:#B5BBC2}
.sbox input::-webkit-search-cancel-button{display:none}
.sx{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--soft);color:var(--dim);font-size:.9rem}
.sbtn{flex:none;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--soft);font-size:1.25rem;display:grid;place-items:center}
.sbox.on ~ .sbtn{display:none}
@media (min-width:761px){ .sbox{display:flex} .sbtn{display:none} .sx{visibility:hidden} .sbox.on .sx,.sbox:focus-within .sx{visibility:visible} }
@media (max-width:760px){ .sbox.on ~ .setbtn{display:none} body.srch .who > div{display:none} body.srch .hr{margin-left:.5rem} .sbox{height:2.7rem} .sbtn{width:2.7rem;height:2.7rem;font-size:1.1rem} }
@media (max-height:560px) and (orientation:landscape){ .sbox{height:2.5rem} .sbtn{width:2.5rem;height:2.5rem;font-size:1rem} }

/* 엄마 설정: 새 소식 */
.news{display:none;margin-top:1.1rem;background:#FFF4EC;border:1.5px solid #FFD9C4;border-radius:1.1rem;padding:.85rem 1rem .9rem}
.news.on{display:block}
.news .nh{display:flex;align-items:center;gap:.5rem}
.news .nh b{font-weight:400;font-size:1.12rem;color:#C8451A}
.news .nh small{font-size:.86rem;color:var(--dim);margin-left:auto;white-space:nowrap}
.news .nh em{font-style:normal;background:#E8632D;color:#fff;font-size:.72rem;padding:.12rem .45rem;border-radius:100px;letter-spacing:.03em}
.news ul{list-style:none;margin:.65rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.news li{display:flex;gap:.55rem;font-size:.98rem;line-height:1.45;color:#3C3129}
.news li i{font-style:normal;flex:none;width:1.4rem;text-align:center}
.news li small{display:block;font-size:.84rem;color:#8A7E74;margin-top:.05rem}
.news .nf{margin-top:.75rem;text-align:right}
.news .nf button{font-size:.9rem;color:#C8451A;background:#fff;border:1.5px solid #FFD9C4;border-radius:100px;padding:.4rem .9rem}
.setbtn{position:relative}
.setbtn.dot::after{content:'NEW';position:absolute;top:-.45rem;right:-.3rem;background:#E8632D;color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:.14rem .42rem;border-radius:100px;border:2px solid #fff;line-height:1.1}

/* 영어 자막 켜고 끄기 */
.ccbtn{height:3.1rem;padding:0 1.1rem;border-radius:100px;background:#ffffff1A;color:#fff;font-size:1.05rem;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.ccbtn i{font-style:normal;font-family:'Nunito';font-weight:800;font-size:.72rem;letter-spacing:.06em;border:1.5px solid #ffffff99;border-radius:.3rem;padding:.08rem .3rem}
.ccbtn.on{background:#fff;color:#14181E}.ccbtn.on i{border-color:#14181E;background:#14181E;color:#fff}
.bigbtn{white-space:nowrap}
#play.big .fctl .ccbtn2{font-family:'Nunito';font-weight:800;letter-spacing:.06em}
#play.big .fctl .ccbtn2.on{background:#fff;color:#14181E}
@media (max-height:560px) and (orientation:landscape){.ccbtn{height:2.5rem;font-size:.95rem;padding:0 .9rem}}
@media (max-width:760px){.ccbtn span{display:none}.ccbtn{padding:0 .8rem}.bigbtn span{display:none}.bigbtn{padding:0 .9rem;font-size:1.3rem}}

/* 스레드·인스타 안 브라우저: 아래쪽을 앱 메뉴가 가리므로 띠를 위에 */
.ibar.top{top:calc(.8rem + env(safe-area-inset-top));bottom:auto;animation-name:ibdn}
@keyframes ibdn{from{transform:translateY(-140%)}to{transform:none}}
/* 머리 제목: 글자 중간에서 끊기지 않게 (지호의 슈심송 카 / 드 → 지호의 / 슈심송 카드) */
.who b{word-break:keep-all;text-wrap:balance}
body.ibtop .scr > .top{margin-top:var(--ibh,0px)}
/* 폰(특히 글자 크게 설정한 폰): 제목이 버튼 밑으로 파고들지 않게 */
.who{flex:1 1 auto;min-width:0}
.who > div{min-width:0}
.hr{flex:none}
.ib-t b,.ib-t span{word-break:keep-all}
@media (max-width:500px){
  .who b{font-size:1.5rem}
  .who span{letter-spacing:.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .setbtn{padding:0 .85rem 0 .7rem;gap:.3rem}
}
.ib-t b{text-wrap:balance}
body.srch .hr{flex:1 1 auto}

/* 영상이 끝나면: 유튜브 끝 화면은 그대로(가리지 않음), 우리 버튼은 플레이어 아래 */
.pend{display:none;margin-top:1.2rem;width:100%;max-width:46rem}
#play.done .pinfo{display:none}
#play.done .pend{display:block}
#play.done .pbox{width:min(100%, calc((100dvh - 25rem) * 16 / 9))}
.pend .ph{display:flex;align-items:center;gap:.8rem;color:#fff}
.pend .ph i{font-style:normal;font-size:2.4rem;animation:pop .6s ease-out}
.pend .ph b{font-weight:400;font-size:1.7rem}
.pend .ph span{display:block;font-size:1rem;color:#ffffffAA;margin-top:.15rem}
.pend .pb3{margin-top:1rem;display:grid;grid-template-columns:1fr 1.6fr;gap:.8rem}
.pend .pb3 button{border-radius:1.4rem;color:#fff;display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;font-size:1.15rem;text-align:left}
.pend .ag{background:#ffffff1F;justify-content:center}
.pend .ag em{font-style:normal;font-size:1.8rem}
.pend .nx{background:var(--c)}
.pend .nx img{width:5.2rem;aspect-ratio:16/9;object-fit:cover;border-radius:.6rem;flex:none}
.pend .nx small{display:block;font-size:.85rem;opacity:.85}
.pend .nx b{display:block;font-weight:400;font-size:1.15rem;line-height:1.2}
.pend .cnt{margin-top:.7rem;color:#ffffffAA;font-size:.95rem;text-align:center}
.pend .cnt:empty{display:none}
.pend .hm{margin-top:.9rem;width:100%;text-align:center;color:#ffffff99;font-size:1rem}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (min-width:761px){ .pend .ph{justify-content:center} }
@media (max-width:760px){ .pend .pb3{grid-template-columns:1fr} .pend .ag{justify-content:flex-start} }
#play.big .pend{display:none !important}

/* 끝나면 우리 버튼 크게 — 플레이어는 가리지 않고, 유튜브 최소 크기(200×200px) 이상 유지 */
@media (min-width:761px) and (orientation:portrait){
  #play.done .pbox{width:min(100%, 60rem)}
  #play.done .pend{max-width:60rem}
  .pend .ph{justify-content:flex-start !important}
  .pend .ph i{font-size:4rem} .pend .ph b{font-size:3.2rem} .pend .ph span{font-size:1.5rem}
  .pend .pb3{grid-template-columns:1fr;gap:1.2rem}
  .pend .nx{order:-1;flex-direction:column;align-items:stretch;padding:1.2rem;gap:.9rem}
  .pend .nx img{width:100%;border-radius:1.2rem}
  .pend .nx small{font-size:1.4rem} .pend .nx b{font-size:2.3rem}
  .pend .ag{padding:1.5rem;font-size:2rem} .pend .ag em{font-size:2.6rem}
  .pend .hm{font-size:1.5rem}
}
@media (min-width:761px) and (orientation:landscape){
  #play.done .pwrap{flex-direction:row;align-items:center;justify-content:center;gap:2.4rem;padding:1rem 2.2rem 2rem}
  #play.done .pbox{width:min(44%, 30rem);min-width:360px;flex:none}
  #play.done .pend{margin-top:0;max-width:40rem;flex:1}
  .pend .ph{justify-content:flex-start !important}
  .pend .ph i{font-size:3.6rem}
  .pend .ph b{font-size:2.6rem}
  .pend .ph span{font-size:1.25rem}
  .pend .pb3{grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
  .pend .nx{order:-1;flex-direction:column;align-items:stretch;padding:1rem;gap:.8rem}
  .pend .nx img{width:100%;border-radius:1rem}
  .pend .nx small{font-size:1.05rem}
  .pend .nx b{font-size:1.7rem}
  .pend .ag{padding:1.3rem;font-size:1.5rem}
  .pend .ag em{font-size:2.2rem}
  .pend .hm{font-size:1.15rem;margin-top:1.1rem}
}
@media (max-width:760px){
  #play.done .pwrap{padding-left:.7rem;padding-right:.7rem}
  #play.done .pbox{width:100%;min-height:200px}
  .pend .ph i{font-size:3rem} .pend .ph b{font-size:2.1rem}
  .pend .pb3{gap:.9rem}
  .pend .nx{order:-1;flex-direction:column;align-items:stretch;padding:.9rem;gap:.6rem}
  .pend .nx img{width:100%;border-radius:.9rem}
  .pend .nx small{font-size:1rem} .pend .nx b{font-size:1.5rem}
  .pend .ag{padding:1.2rem;font-size:1.35rem;justify-content:center}
}
@media (max-height:560px) and (orientation:landscape){
  #play.done .pwrap{flex-direction:row;align-items:center;gap:1.2rem;padding:.5rem 1.2rem}
  #play.done .pbox{width:min(52%, calc((100dvh - 5rem) * 16 / 9));min-width:360px;min-height:200px}
  .pend{margin-top:0;max-width:none;flex:1}
  .pend .ph i{font-size:2rem} .pend .ph b{font-size:1.5rem} .pend .ph span{font-size:.9rem}
  .pend .pb3{grid-template-columns:1fr;gap:.6rem;margin-top:.6rem}
  .pend .nx{flex-direction:row !important;align-items:center !important;padding:.6rem .8rem !important}
  .pend .nx img{width:6rem !important}
  .pend .nx b{font-size:1.15rem !important}
  .pend .ag{padding:.7rem !important;font-size:1.1rem !important}
  .pend .hm{margin-top:.4rem}
}
/* 골라 듣기: 폰에서도 '골라서 듣기' 바가 화면 아래에 항상 붙어 있게 (끝까지 안 내려도 됨) */
@media (max-width:760px){
  #foot:has(.selbar){position:sticky;bottom:0;z-index:15;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
  #foot .selbar{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
}

/* 엄마 추천템 (쿠팡 파트너스 상품) */
.cpb .pkh{display:flex;align-items:baseline;gap:.5rem;padding:0 .2rem}
.cpb .pkh b{font-weight:400;font-size:1.2rem}
.cpb .pkh small{font-size:.85rem;color:#8A8F96}
.cpb .pkrow{margin-top:.7rem;display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}
.cpb .pkrow a{flex:none;width:9.6rem;scroll-snap-align:start;background:#fff;border-radius:1rem;border:1.5px solid #EEE8DD;text-decoration:none;color:#14181E;overflow:hidden;display:flex;flex-direction:column}
.cpb .pkrow img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;display:block}
.cpb .pkrow .t{padding:.5rem .6rem .1rem;font-size:.95rem;line-height:1.25}
.cpb .pkrow .w{padding:0 .6rem;font-size:.75rem;color:#8A8F96;line-height:1.3;min-height:2em}
.cpb .pkrow .p{padding:.35rem .6rem .6rem;font-size:.95rem;color:#E8632D;margin-top:auto}
.cpb .pkrow .p s{color:#B5BAC0;font-size:.75rem;margin-left:.3rem}

/* 엄마 주간 리포트 */
.rep{margin-top:1rem;background:#fff;border:2px solid #F3EFE7;border-radius:1.3rem;overflow:hidden}
.rep .rh{background:linear-gradient(135deg,#E8632D,#F28C28);color:#fff;padding:1rem 1.1rem;display:flex;align-items:center;gap:.7rem}
.rep .rh .em{font-size:1.9rem}
.rep .rh b{font-weight:400;font-size:1.35rem;display:block}
.rep .rh span{font-size:.9rem;opacity:.85;display:block;margin-top:.1rem}
.rep .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:.6rem;padding:.9rem 1rem 0}
.rep .st{background:#FAF8F3;border-radius:1rem;padding:.7rem .4rem;text-align:center}
.rep .st b{display:block;font-size:1.5rem;font-weight:400;color:#E8632D}
.rep .st span{display:block;margin-top:.15rem;font-size:.78rem;color:#8A8F96}
.rep .sec{padding:.9rem 1rem;font-size:.95rem;color:#55606B}
.rep .top3{padding:.7rem 1rem 0;display:flex;flex-direction:column;gap:.5rem}
.rep .t3{display:flex;align-items:center;gap:.6rem}
.rep .t3 img{width:4.6rem;aspect-ratio:16/9;object-fit:cover;border-radius:.6rem;flex:none}
.rep .t3 .bar{flex:1;min-width:0}
.rep .t3 .bar b{display:block;font-weight:400;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep .t3 .bar .bg{margin-top:.25rem;height:.55rem;background:#F3EFE7;border-radius:100px;overflow:hidden}
.rep .t3 .bar .bg i{display:block;height:100%;background:#F2A00C;border-radius:100px}
.rep .t3 .n{flex:none;font-family:'Nunito';font-weight:800;font-size:.85rem;color:#B5872A}
.rep .unh{margin:.9rem 1rem 1rem;width:calc(100% - 2rem);background:#FFF8EC;border:1.5px solid #F5E3C2;border-radius:1rem;padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem;text-align:left;color:#14181E}
.rep .unh div{flex:1;min-width:0}
.rep .unh small{display:block;font-size:.82rem;color:#B5872A}
.rep .unh small b{font-weight:400}
.rep .unh > div > b{display:block;font-weight:400;font-size:1.1rem;margin-top:.15rem;color:#C8451A}
.rep .unh span{flex:none;font-size:1.3rem;color:#C8451A}

/* 리포트 안 관심사 추천 + 엄마 맞춤(다이나믹) 배너 */
.rep .tip{margin:.9rem 1rem 0;background:#FFF8EC;border-radius:1rem;padding:.7rem .85rem;display:flex;gap:.7rem;align-items:center;text-decoration:none;color:#14181E}
.rep .tip img{width:3.6rem;height:3.6rem;object-fit:contain;border-radius:.7rem;background:#fff;flex:none}
.rep .tip .tx{flex:1;min-width:0}
.rep .tip .tx small{display:block;font-size:.78rem;color:#B5872A}
.rep .tip .tx b{display:block;font-weight:400;font-size:1rem;margin-top:.1rem}
.rep .tip .pr{flex:none;font-size:.95rem;color:#E8632D}
.rep .disc2{padding:.35rem 1rem 0;font-size:.68rem;color:#B5BAC0;text-align:right}
.cpb.dyn{margin-top:1rem}
.cpb.dyn iframe{margin-top:.6rem}

/* 영상이 안 나올 때 (끝 패널 재사용) */
#play.err .pend .ag{display:none}
#play.err .pend .pb3{grid-template-columns:1fr}
#play.err1 .pend .pb3{display:none}
#play.err .pend .ph i{animation:none}
#play.err .pend .cnt span{display:inline-block;background:#ffffff1A;border-radius:100px;padding:.3rem .9rem}
/* 공식 아님 안내 */
.disc.own{margin-top:1.1rem;padding-bottom:1rem;text-align:center}

/* 즐겨찾기 탭 (전체 옆) */
.wkc u{text-decoration:none;font-family:'Nunito';font-weight:800;font-size:.85em;background:#fff;color:#8A6400;border-radius:100px;padding:0 .5rem;margin-left:.4rem}
.wkc.fav.on u{color:#C98A00}
.favsum .th .none{grid-column:1/-1;color:#B8A15A;font-size:.95rem;padding:.4rem 0}
.favsum .th .more{width:100%;aspect-ratio:16/10;border-radius:.45rem;background:#F5C542;color:#fff;display:grid;place-items:center;font-family:'Nunito';font-weight:800;font-size:1rem}
/* 즐겨찾기 고르기 창 — 찾기 */
.pick .pq{margin-top:.85rem;display:flex;align-items:center;gap:.45rem;height:3rem;padding:0 .5rem 0 .95rem;border-radius:100px;background:#FFFBEA;border:2px solid #F7E3A1}
.pick .pq i{font-style:normal;font-size:1rem}
.pick .pq input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:1.05rem;color:inherit;outline:none}
.pick .pq input::placeholder{color:#C9B67A}
.pick .pq input::-webkit-search-cancel-button{display:none}
.pick .pq button{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:#F5C542;color:#fff;font-size:.85rem;visibility:hidden}
.pick .pq:focus-within{border-color:#F5C542}
.pnone{padding:2.5rem 1rem;text-align:center;color:#A6ADB4;font-size:1.05rem}
.pick{height:92dvh}                                   /* 찾는 동안 창 크기가 줄었다 늘었다 하지 않게 */
.pick .rows{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 긴 제목이 오른쪽으로 삐져나가지 않게 */
@media (max-width:760px){ .pick .rows{grid-template-columns:minmax(0,1fr)} }


/* 한글·영어 이어 보기 */
.opn.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .opn.three{grid-template-columns:1fr} }
.tile .kb{position:absolute;right:.6rem;top:.6rem;z-index:2;background:#fff;color:#14181E;border-radius:100px;padding:.18rem .6rem;font-size:.82rem;box-shadow:0 2px 6px rgba(0,0,0,.18)}
@media (max-width:760px){ .tile .kb{font-size:.68rem;padding:.12rem .45rem;right:.45rem;top:.45rem} }

.bisub{margin-top:.7rem;padding:.8rem .9rem .9rem;border-radius:1.1rem;background:#F7F4EE}
.bisub .bisl{font-size:.92rem;color:var(--dim);margin-bottom:.5rem}
#wLang:empty{display:none}
.lsw{display:inline-flex;margin-top:.55rem;background:#F1EDE4;border-radius:100px;padding:.25rem;gap:.2rem}
.lsw button{border-radius:100px;padding:.4rem .95rem;font-size:1rem;color:#79828C}
.lsw button.on{background:#fff;color:#14181E;box-shadow:0 2px 6px rgba(0,0,0,.12)}
/* 그때그때: 재생 화면·끝 화면의 [한글 | 영어] */
.lsw.dk{background:#ffffff1c}
.lsw.dk button{color:#ffffffB3}
.lsw.dk button.on{background:#fff;color:#14181E}
#play.bim .pinfo .pk{display:inline-block;vertical-align:middle}
#pLang{display:inline-block;vertical-align:middle;margin:.35rem 0 0 .7rem}
#pLang:empty{display:none}
#pLang .lsw{margin-top:0;padding:.18rem}
#pLang .lsw button{padding:.24rem .8rem;font-size:.92rem}
@media (min-width:761px) and (min-height:561px){ #play.bim:not(.done):not(.big) .pbox{width:min(100%, calc((100dvh - 16.4rem) * 16 / 9))} }
.pend .elang{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.55rem}
.pend .elang small{font-size:.95rem;color:#ffffff99}
.pend .elang .lsw{margin-top:0}
.pend .cnt .elang + span{display:block}
#play:not(.bim) .fctl .flang{display:none}

/* 고르기 창: 많이 골라도 덜 빨갛게 — 고른 편은 체크 동그라미로만, 안 고른 편은 흐리게 (2026-10-06) */
.pick.sel .r.on{border-color:#F1EDE4;background:#fff}
.pick.sel .r.on i{background:var(--c);border-color:var(--c);color:#fff}
.pick.sel .r:not(.on) img{opacity:.45;filter:grayscale(.5)}
.pick.sel .r:not(.on) b{color:#A6ADB4}
.pick .gb.all{background:#fff;background:color-mix(in srgb, var(--gc) 9%, #fff);color:var(--gc);border-color:color-mix(in srgb, var(--gc) 45%, #fff);border-style:solid}
.pick .gb.all:before{background:var(--gc)}
.pick .gb.all span{color:var(--gc)}

/* 엄마 문: 한글 숫자 → 숫자판 (2026-10-06) */
.gate .q{margin-top:1.1rem;font-size:2.7rem}
.gate .slots{margin-top:.9rem;display:flex;justify-content:center;gap:.6rem}
.gate .slots i{width:3.3rem;height:3.9rem;border-radius:1rem;border:2.5px solid #E7E1D6;display:grid;place-items:center;font-style:normal;
  font-family:'Nunito';font-weight:800;font-size:2rem;color:#14181E}
.gate .msg{min-height:1.5rem;margin-top:.55rem;font-size:1rem;color:var(--c)}
.gate .pad{margin-top:.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.gate .pad button{height:3.4rem;border-radius:1rem;background:var(--soft);font-family:'Nunito';font-weight:800;font-size:1.5rem;color:#14181E}
.gate .pad button.bk{font-size:1.3rem;color:var(--dim)}
.gate .pad button:disabled{opacity:.35}
.gate.shake{animation:gshake .4s}
@keyframes gshake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (max-height:700px){ .gate{padding:1.4rem 1.6rem} .gate .q{font-size:2.2rem;margin-top:.7rem} .gate .pad button{height:2.9rem} }
/* 재생 화면 닫기(✕)는 왼쪽 위 — 아이 화면 오른쪽 위 '엄마 설정'과 같은 자리를 누르지 않게 */
#play .who .pclose{flex:none}
#play.big:not(.rot) .fctl .fx{position:fixed;left:.8rem;top:.8rem}

/* 끝 화면: '처음으로'도 '한 번 더'와 같은 크기 버튼으로 — 다음 곡은 위에 크게, 아래 줄에 [한 번 더 | 처음으로] (세로·가로 모두) */
.pend .pb3{grid-template-columns:1fr 1fr !important}
.pend .pb3 .nx{grid-column:1 / -1;order:-1}
.pend .hm2{background:#ffffff1F;justify-content:center}
.pend .hm2 em{font-style:normal;font-size:1.6rem}
.pend .ag{justify-content:center !important}
@media (min-width:761px) and (orientation:portrait){ .pend .hm2{padding:1.5rem;font-size:2rem} .pend .hm2 em{font-size:2.3rem} }
@media (min-width:761px) and (orientation:landscape){ .pend .hm2{padding:1.3rem;font-size:1.5rem} .pend .hm2 em{font-size:1.9rem} }
@media (max-width:760px){ .pend .hm2{padding:1.2rem;font-size:1.35rem} }
@media (max-height:560px) and (orientation:landscape){ .pend .hm2{padding:.7rem !important;font-size:1.1rem !important} .pend .hm2 em{font-size:1.3rem} }
#play.err .pend .pb3{grid-template-columns:1fr !important}
#play.err1 .pend .pb3{display:grid}
#play.err1 .pend .nx{display:none}
/* [한 번 더 | 처음으로] 크기: '.pend .pb3 button' 기본값보다 우선하게 */
.pend .pb3 .ag,.pend .pb3 .hm2{padding:1.25rem 1rem;font-size:1.35rem;gap:.6rem}
.pend .pb3 .ag em,.pend .pb3 .hm2 em{font-size:1.7rem}
@media (min-width:761px) and (orientation:portrait){ .pend .pb3 .ag,.pend .pb3 .hm2{padding:1.5rem 1rem;font-size:1.9rem} .pend .pb3 .ag em,.pend .pb3 .hm2 em{font-size:2.3rem} }
@media (min-width:761px) and (orientation:landscape){ .pend .pb3 .ag,.pend .pb3 .hm2{padding:1.25rem 1rem;font-size:1.55rem} .pend .pb3 .ag em,.pend .pb3 .hm2 em{font-size:1.9rem} }
@media (max-height:560px) and (orientation:landscape){ .pend .pb3 .ag,.pend .pb3 .hm2{padding:.75rem .8rem !important;font-size:1.15rem !important} .pend .pb3 .ag em,.pend .pb3 .hm2 em{font-size:1.35rem} }
/* 혜영님 요청: [한 번 더 | 처음으로]를 '다 들었어요!' 바로 아래로 올리고, 다음 곡 카드는 그 아래 */
.pend .pb3 .nx{order:1}
.pend .pb3{margin-top:.9rem}

.tile .lr{min-height:2.6em}
@media (max-height:560px) and (orientation:landscape){.tile .lr{min-height:0}}
.tile .len{position:absolute;left:.6rem;bottom:.6rem;z-index:2;background:#14181ECC;color:#fff;border-radius:100px;padding:.2rem .6rem;font-family:'Nunito',sans-serif;font-weight:800;font-size:.8rem}