/* 첫 화면 — W04 Pop(어린이 활동): 밝은 크림 배경, 흰 카드, 2px 선, 오프셋 그림자, 52px 단추.
   여는 화면(로딩 애니메이션)과 학년 → 학기 → 단원을 한 화면에서 고르는 놀이터 입구. game.css 위에 덧씌운다. */
@import url('../../vendor/fonts/pop-fonts.css');
:root{--pop-primary:#A82959;--pop-primary-hover:#882147;--pop-bg:#FFF8E7;--pop-surface:#FFFFFF;--pop-ink:#182848;--pop-muted:#526078;--pop-line:#D9D3C3;--pop-strong:#727887;--pop-soft:#FBE2EB;--pop-yellow:#FFE073;--pop-yellow-soft:#FFF3C4;--pop-good:#1F7A4D;--pop-good-soft:#E3F5EA;--pop-blue-soft:#E6F0FF;--pop-shadow:6px 6px 0 rgba(24,40,72,.12);--pop-shadow-sm:4px 4px 0 rgba(24,40,72,.12);--pop-body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;--pop-head:Jua,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;--pop-num:Inter,'Noto Sans KR',sans-serif;--pop-ease:220ms ease-out}
body.home-page{margin:0;min-height:100svh;background:var(--pop-bg);color:var(--pop-ink);font-family:var(--pop-body);word-break:keep-all}
body.home-page :is(button,input,a){font-family:var(--pop-body)}
body.home-page :focus-visible{outline:3px solid var(--pop-ink);outline-offset:3px}
body.splash-open{overflow:hidden}

/* ---------------- 여는 화면 ---------------- */
.splash{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;overflow:hidden;color:var(--pop-ink);cursor:pointer;
 background:radial-gradient(60% 50% at 50% 36%,#FFF1B8 0%,#FFF8E7 62%),var(--pop-bg);transition:opacity .7s ease,visibility .7s}
.splash-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.splash-aurora{position:absolute;left:50%;top:38%;width:min(120vmin,1100px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
 background:repeating-conic-gradient(from 0deg,#FFE07355 0deg 10deg,transparent 10deg 20deg);animation:sun-spin 40s linear infinite;mask:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes sun-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.splash-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.3vh,14px);width:min(940px,100%);padding:16px;text-align:center;transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .5s,filter .5s}
.splash-island{position:relative;width:min(660px,94vw);height:clamp(120px,24vh,210px)}
.splash-cloud{position:absolute;left:0;right:0;bottom:-6%;overflow:hidden;padding-top:4%;height:62%;display:flex;align-items:flex-end;justify-content:center;animation:island-float 5s ease-in-out infinite;filter:drop-shadow(0 12px 10px rgba(80,110,160,.22))}
.splash-cloud .cl{display:block;height:auto;user-select:none}
.splash-cloud .cl0,.splash-cloud .cl2{width:42%;margin-bottom:4%}
.splash-cloud .cl1{position:relative;z-index:1;width:52%;margin:0 -12%}
.splash-cloud .cl2{transform:scaleX(-1)}
@keyframes island-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.splash-friend{position:absolute;bottom:26%;left:calc(9% + var(--i)*16.4%);width:clamp(68px,12.5vh,112px);aspect-ratio:1;transform:translateX(-50%);
 animation:friend-pop .7s cubic-bezier(.34,1.7,.6,1) both,friend-bob 2.6s ease-in-out infinite;animation-delay:calc(.45s + var(--i)*.12s),calc(1.4s + var(--i)*.21s)}
.splash-friend .character{width:100%;height:100%;filter:drop-shadow(3px 5px 0 rgba(24,40,72,.12))}
@keyframes friend-pop{0%{transform:translateX(-50%) translateY(70%) scale(0) rotate(-25deg);opacity:0}70%{transform:translateX(-50%) translateY(-12%) scale(1.12) rotate(6deg);opacity:1}100%{transform:translateX(-50%)}}
@keyframes friend-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px) rotate(var(--tilt,-3deg))}}
.splash-friend:nth-child(odd){--tilt:3deg}
.splash-title{display:flex;align-items:flex-end;justify-content:center;margin:0;font-family:var(--pop-head);font-size:clamp(56px,11.5vw,128px);line-height:1;font-weight:400}
.splash-title .ch{display:inline-block;color:var(--c);-webkit-text-stroke:3px var(--pop-ink);paint-order:stroke fill;text-shadow:6px 6px 0 rgba(24,40,72,.14);
 animation:letter-drop .8s cubic-bezier(.3,1.6,.5,1) both,letter-wave 2.8s ease-in-out infinite;animation-delay:calc(.08s + var(--i)*.09s),calc(1.3s + var(--i)*.16s)}
.splash-title .ch:nth-child(even){--tilt:-4deg}
.splash-title .gap{width:.3em}
@keyframes letter-drop{0%{transform:translateY(-150%) scale(.3) rotate(-25deg);opacity:0}55%{transform:translateY(10%) scale(1.15,.82);opacity:1}78%{transform:translateY(-5%) scale(.95,1.06)}100%{transform:none}}
@keyframes letter-wave{0%,100%{transform:none}50%{transform:translateY(-.08em) rotate(var(--tilt,4deg))}}
.splash-sub{margin:0;font-size:clamp(16px,2.2vw,22px);font-weight:700;color:var(--pop-muted);animation:fade-up .6s .85s both}
.splash-line{position:relative;width:min(560px,86vw);height:80px;margin-top:4px;animation:fade-up .6s .95s both}
.line-track{position:absolute;left:0;right:0;top:44px;height:12px;border-radius:99px;background:#EFE7D4;border:2px solid var(--pop-line);overflow:hidden}
.line-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--pop-yellow),#F59E7A,var(--pop-primary))}
.line-ticks{position:absolute;left:0;right:0;top:38px;height:42px}
.line-ticks span{position:absolute;left:calc(var(--k)*10%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.line-ticks i{width:3px;height:24px;border-radius:2px;background:#CFC6B2;transition:background .2s}
.line-ticks b{margin-top:2px;font-family:var(--pop-num);font-weight:800;font-size:13px;color:#A49D8C;transition:color .2s,transform .25s cubic-bezier(.3,1.8,.5,1)}
.line-ticks span.on i{background:var(--pop-primary)}.line-ticks span.on b{color:var(--pop-primary);transform:scale(1.2)}
.line-hopper{position:absolute;left:0;top:-14px;width:62px;height:62px;transform:translateX(-50%);will-change:left}
.line-hopper .character{width:62px;height:62px;filter:drop-shadow(2px 3px 0 rgba(24,40,72,.15));animation:hop .34s ease-in-out infinite alternate}
@keyframes hop{from{transform:translateY(0) scale(1.06,.92)}to{transform:translateY(-15px) scale(.96,1.05)}}
.splash.is-ready .line-hopper .character{animation:cheer .7s cubic-bezier(.3,1.7,.5,1) both}
@keyframes cheer{0%{transform:none}45%{transform:translateY(-34px) rotate(-12deg) scale(1.25)}100%{transform:translateY(-6px) scale(1.15)}}
.splash-status{margin:0;min-height:1.4em;font-size:15px;font-weight:700;color:var(--pop-muted);animation:fade-up .6s 1.05s both}
.splash.is-ready .splash-status{color:var(--pop-primary)}
.splash-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:2;min-height:52px;padding:8px 20px;border-radius:18px;border:2px solid var(--pop-strong);background:var(--pop-surface);color:var(--pop-ink);font-size:15px;font-weight:700;box-shadow:var(--pop-shadow-sm);cursor:pointer}
.splash-skip:hover{background:var(--pop-yellow-soft)}
.splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.splash.is-leaving .splash-stage{transform:scale(1.18) translateY(-3%);filter:blur(6px);opacity:0}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- 놀이터 입구 ---------------- */
.home{--grade-color:#CFE6FF;position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;background:var(--pop-bg);color:var(--pop-ink)}
.home-sky{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;display:block;opacity:.55}
.home-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px clamp(16px,2.4vw,32px) 10px}
.home-logo{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 8px;border:0;background:none;color:var(--pop-ink);font-family:var(--pop-head);font-size:clamp(22px,2.2vw,28px);border-radius:18px;cursor:pointer}
.home-logo:hover{background:var(--pop-yellow-soft)}
.home-logo img{width:42px;height:42px;border-radius:12px;box-shadow:var(--pop-shadow-sm);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.home-logo:hover img{transform:rotate(-12deg) scale(1.08)}
.home-name{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 0 auto;padding:4px 4px 4px 16px;min-height:52px;border-radius:18px;border:2px solid var(--pop-strong);background:var(--pop-surface)}
.home-name:focus-within{border-color:var(--pop-primary);box-shadow:0 0 0 3px #A8295933}
.home-name label{font-size:13px;font-weight:700;color:var(--pop-muted);white-space:nowrap}
.home-name input{width:clamp(120px,15vw,200px);min-width:0;border:0;background:transparent;color:var(--pop-ink);font-size:17px;font-weight:700;padding:6px 2px;outline:none}
.home-name button{min-height:42px;padding:4px 16px;border:0;border-radius:14px;background:var(--pop-primary);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.home-name button:hover{background:var(--pop-primary-hover)}
#name-status{position:absolute;top:calc(100% + 6px);right:6px;z-index:5;padding:5px 12px;border-radius:12px;background:var(--pop-good-soft);border:2px solid var(--pop-good);color:#14532d;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none}
#name-status.show{animation:toast 2.8s ease both}
@keyframes toast{0%{opacity:0;transform:translateY(-4px)}10%,82%{opacity:1;transform:none}100%{opacity:0}}
.home-actions{display:flex;gap:8px;flex-wrap:wrap}
.home-chip{display:inline-flex;align-items:center;min-height:52px;padding:6px 16px;border-radius:18px;border:2px solid var(--pop-strong);background:var(--pop-surface);color:var(--pop-ink);font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;transition:background var(--pop-ease),transform var(--pop-ease)}
.home-chip:hover{background:var(--pop-yellow-soft);transform:translateY(-2px)}
.home-main{display:grid;grid-template-columns:minmax(300px,350px) minmax(0,1fr);gap:clamp(16px,2vw,24px);padding:6px clamp(16px,2.4vw,32px) 8px;min-height:0}
/* 고르기 판: 노란 미션 판 */
.home-pick{display:flex;flex-direction:column;gap:12px;min-height:0;padding:20px;border-radius:28px;border:2px solid var(--pop-line);background:var(--pop-yellow);box-shadow:var(--pop-shadow)}
.pick-q{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--pop-head);font-weight:400;font-size:21px;line-height:1.2;color:var(--pop-ink)}
.pick-step{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pop-ink);color:#fff;font-family:var(--pop-num);font-weight:800;font-size:16px}
.grade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grade-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;height:clamp(84px,12.5vh,112px);padding:10px 12px;overflow:hidden;border-radius:20px;text-align:left;color:var(--pop-ink);cursor:pointer;
 border:2px solid var(--pop-line);background:var(--pop-surface);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow var(--pop-ease),background var(--pop-ease)}
.grade-btn:hover{transform:translateY(-3px);box-shadow:var(--pop-shadow-sm)}
.grade-num{position:relative;z-index:1;font-family:var(--pop-num);font-weight:800;font-size:clamp(32px,4.4vh,42px);line-height:.95;color:var(--pop-ink)}
.grade-word{position:relative;z-index:1;font-size:14px;font-weight:700;color:var(--pop-muted)}
.grade-friend{position:absolute;right:-14px;bottom:-16px;width:clamp(66px,9.5vh,84px);height:clamp(66px,9.5vh,84px);transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.grade-btn::before{content:'';position:absolute;right:-20px;bottom:-20px;width:86px;height:86px;border-radius:50%;background:var(--gc);opacity:.9}
.grade-btn:hover .grade-friend{transform:translateY(-6px) rotate(-7deg)}
.grade-meter{position:absolute;left:10px;right:10px;top:8px;height:6px;border-radius:9px;background:#EFE7D4;overflow:hidden}
.grade-meter i{display:block;width:0;height:100%;border-radius:9px;background:var(--pop-good);transition:width .6s}
.grade-btn.active{border-color:var(--pop-ink);background:var(--gc);box-shadow:var(--pop-shadow);transform:translateY(-3px)}
.grade-btn.active::before{opacity:0}
.grade-btn.active .grade-word{color:var(--pop-ink)}
.grade-btn.active .grade-friend{transform:translateY(-10px) scale(1.12)}
.grade-btn.bounce{animation:squish .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes squish{0%{transform:none}30%{transform:scale(.9,1.08)}60%{transform:translateY(-8px) scale(1.06,.95)}100%{transform:translateY(-3px)}}
.home .semester-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:auto;padding:5px;border-radius:20px;border:2px solid var(--pop-ink);background:var(--pop-surface)}
.home .semester-switch button{position:relative;z-index:1;min-width:0;min-height:52px;border:0;border-radius:15px;background:transparent;color:var(--pop-ink);font-family:var(--pop-head);font-size:21px;cursor:pointer;transition:color .3s}
.home .semester-switch button:hover{background:transparent}
.home .semester-switch button.active{background:transparent;border:0;color:#fff}
.semester-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:15px;background:var(--pop-primary);box-shadow:var(--pop-shadow-sm);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.home[data-semester-on="2"] .semester-knob{transform:translateX(100%)}
.pick-progress{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:20px;border:2px solid var(--pop-line);background:var(--pop-surface)}
.pick-progress svg{flex:none;width:48px;height:48px;transform:rotate(-90deg)}
.pick-progress circle{fill:none;stroke:#EFE7D4;stroke-width:6}
.pick-progress .ring{stroke:var(--pop-good);stroke-linecap:round;transition:stroke-dasharray .7s}
.pick-progress b{display:block;font-family:var(--pop-head);font-weight:400;font-size:19px}
.home .semester-progress{font-size:14px;font-weight:700;color:var(--pop-muted)}
.pick-friend{flex:1;min-height:0;display:flex;align-items:flex-end;gap:6px;padding-top:4px}
.pick-friend .character{flex:none;width:clamp(80px,13vh,120px);height:clamp(80px,13vh,120px);animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-8px) rotate(-3deg)}}
.pick-friend p{position:relative;margin:0 0 clamp(30px,6vh,60px);padding:10px 14px;border-radius:18px 18px 18px 4px;border:2px solid var(--pop-line);background:var(--pop-surface);color:var(--pop-ink);font-size:14.5px;line-height:1.5;box-shadow:var(--pop-shadow-sm)}
.pick-friend p b{color:var(--pop-primary)}
/* 게임 카드 */
.home-games{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.games-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.games-head h1{margin:0;font-family:var(--pop-head);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--pop-ink)}
.games-grade{color:var(--pop-primary)}
.games-sub{margin:0;font-size:15px;font-weight:500;color:var(--pop-muted);line-height:1.4}
.home .game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card-cell{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.card-cell .unit-card{flex:1 1 auto}
.home .unit-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:0;padding:20px 18px 16px;border-radius:28px;overflow:hidden;color:var(--pop-ink);text-decoration:none;
 border:2px solid var(--pop-line);background:var(--pop-surface);box-shadow:var(--pop-shadow);
 transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease,box-shadow .25s,border-color .25s}
.home .unit-card::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:var(--card-color)}
.home .unit-card:hover,.home .unit-card:focus-visible{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:8px 10px 0 rgba(24,40,72,.16);border-color:var(--pop-ink)}
.home .unit-kicker{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--pop-muted)}
.home .card-status{flex:none;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--pop-soft);color:var(--pop-primary);border:0}
.home .unit-card.is-going .card-status{background:var(--pop-blue-soft);color:#1D4ED8}
.home .unit-card.is-done .card-status{background:var(--pop-good-soft);color:var(--pop-good)}
.card-body{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;column-gap:12px;align-items:end;flex:1;min-height:0}
.card-text{display:contents}
.home .lobby-character{flex:none;width:clamp(64px,11vh,104px);height:clamp(64px,11vh,104px);margin:0;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.home .card-body .lobby-character{grid-row:1/4;grid-column:1;align-self:center}
.home .card-body .edition-tag{grid-row:1;grid-column:2;align-self:end;justify-self:start;margin-bottom:4px;padding:2px 10px;border-radius:999px;background:var(--pop-yellow-soft);color:#6B4E00;font-size:12px;font-weight:700;line-height:1.5}
.home .card-body h2{grid-row:2;grid-column:2;margin:0 0 2px;font-family:var(--pop-head);font-weight:400;font-size:clamp(19px,1.75vw,24px);line-height:1.2;color:var(--pop-ink)}
.home .card-body p{grid-row:3;grid-column:2;align-self:start;margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--pop-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home .unit-card:hover .lobby-character{transform:translateY(-6px) rotate(-6deg) scale(1.07)}
.home .card-go{margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border-radius:16px;background:var(--pop-primary);color:#fff;font-size:15px;font-weight:700;box-shadow:var(--pop-shadow-sm)}
.home .card-go b{transition:transform .25s}.home .unit-card:hover .card-go{background:var(--pop-primary-hover)}.home .unit-card:hover .card-go b{transform:translateX(5px)}
.home .unit-card.is-target{border-color:var(--pop-primary);box-shadow:0 0 0 4px #A8295944,var(--pop-shadow)}
.game-grid.cards-in .unit-card{animation:card-in .55s cubic-bezier(.3,1.45,.5,1) backwards;animation-delay:calc(var(--i)*65ms)}
@keyframes card-in{from{opacity:0;transform:translateY(26px) scale(.92) rotate(-2deg)}}
.home .records-note{margin:0;font-size:13px;color:var(--pop-muted)}
.home-foot{display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;padding:6px 16px 14px;text-align:center;font-size:12.5px;color:var(--pop-muted)}
.home-foot button{min-height:44px;padding:4px 14px;border-radius:14px;border:2px solid var(--pop-line);background:var(--pop-surface);color:var(--pop-ink);font-size:13px;font-weight:700;cursor:pointer}
.home-foot .storage-warning{color:#B3261E}
.home-foot .storage-warning:empty{display:none}
/* 여는 화면이 걷힐 때 입구가 차례로 등장 */
.home.home-enter .home-top{animation:drop-in .6s cubic-bezier(.3,1.4,.5,1) backwards}
.home.home-enter .home-pick{animation:slide-in .65s .06s cubic-bezier(.3,1.3,.5,1) backwards}
.home.home-enter .grade-btn{animation:pop-in .5s cubic-bezier(.3,1.7,.5,1) backwards;animation-delay:calc(.12s + var(--i)*55ms)}
.home.home-enter .games-head{animation:fade-up .5s .18s backwards}
@keyframes drop-in{from{opacity:0;transform:translateY(-26px)}}
@keyframes slide-in{from{opacity:0;transform:translateX(-36px)}}
@keyframes pop-in{from{opacity:0;transform:scale(.5) rotate(-8deg)}}

/* 화면이 충분히 크면 한 화면 안에 모두 담는다(스크롤 없이 고르기). */
@media (min-width:900px) and (min-height:640px),(min-width:600px) and (min-height:960px){
 .home{height:100svh;min-height:0;overflow:hidden}
 .home-main,.home-games{overflow:hidden}
 .home .game-grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
 .home .unit-card{container:card/size}
}
@container card (max-height:270px){.home .card-body .lobby-character{width:72px;height:72px}}
@container card (max-height:225px){.home .card-body .lobby-character{width:58px;height:58px}.home .card-body p{margin-top:2px;font-size:13px;line-height:1.45;-webkit-line-clamp:2}.home .unit-card{gap:5px}.home .card-go{min-height:36px;padding:4px 12px}}
@container card (max-height:185px){.home .card-body .edition-tag{display:none}}
/* 가로가 좁거나 세로가 낮으면 고르기 판을 카드 위 한 줄로 */
@media (max-width:1179px),(max-height:699px){
 .home-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .home-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"q1 grades q2" "q1 grades semester";align-items:center;gap:8px 14px;padding:12px 16px;border-radius:24px}
 .home-pick>.pick-q:nth-of-type(1){grid-area:q1;flex-direction:column;align-items:flex-start;font-size:18px;max-width:7.5em}
 .home-pick>.pick-q:nth-of-type(2){grid-area:q2;font-size:17px}
 .grade-grid{grid-area:grades;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 .home .semester-switch{grid-area:semester;min-width:220px}
 .home .semester-switch button{min-height:48px;font-size:19px}
 .grade-btn{height:78px;padding:8px 10px;border-radius:18px}
 .grade-num{font-size:30px}
 .grade-friend{width:60px;height:60px;right:-12px;bottom:-12px}
 .pick-progress,.pick-friend{display:none}
}
@media (max-width:899px){.home .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-pick{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"q1 grades" "q2 semester"}
 .home-pick>.pick-q:nth-of-type(1){flex-direction:row;align-items:center;max-width:8.5em}
}
@media (max-width:720px){
 .home-top{gap:8px}
 .home-name{order:3;flex:1 1 100%;margin:0}
 .home-name input{flex:1;width:auto}
 .home-actions{margin-left:auto}
 .home-chip{min-height:46px;padding:5px 12px;font-size:13.5px}
 .home-pick{grid-template-columns:minmax(0,1fr);grid-template-areas:"q1" "grades" "q2" "semester";padding:14px}
 .home-pick>.pick-q:nth-of-type(1){flex-direction:row;max-width:none}
 .home .semester-switch{min-width:0}
 .grade-grid{gap:6px}
 .grade-btn{height:66px;padding:6px 8px;align-items:center;border-radius:16px}
 .grade-btn::before{display:none}
 .grade-num{font-size:26px}.grade-word{font-size:12px}
 .grade-friend{display:none}
 .grade-meter{left:8px;right:8px;top:6px;height:4px}
}
@media (max-width:639px){
 .home .game-grid{grid-template-columns:minmax(0,1fr)}
 .home .unit-card{padding:18px 16px 14px}
 .home .card-body .lobby-character{width:72px;height:72px}
 .home-logo{font-size:21px}
 .home-actions{width:100%;margin:0;justify-content:space-between}
 .home-actions .home-chip{flex:1;justify-content:center;padding:5px 6px}
}
@media (max-height:739px){.pick-friend{display:none}}
@media (prefers-reduced-motion:reduce){
 .splash *,.splash-aurora,.home *{animation:none!important}
 .splash-stage,.home .unit-card,.grade-btn,.semester-knob{transition:none}
}
/* 대화 상자(구름섬 친구들·선생님 안내·개인정보) */
body.home-page .dialog-overlay{background:rgba(24,40,72,.45)}
body.home-page .dialog-box{background:var(--pop-surface);color:var(--pop-ink);border:2px solid var(--pop-line);border-radius:28px;box-shadow:var(--pop-shadow);font-family:var(--pop-body)}
body.home-page .dialog-box h2{font-family:var(--pop-head);font-weight:400;font-size:28px;color:var(--pop-ink)}
body.home-page .dialog-box p{line-height:1.65;color:var(--pop-ink)}
body.home-page .dialog-box small{color:var(--pop-muted)}
body.home-page .dialog-box a{color:var(--pop-primary)}
body.home-page .dialog-close{min-height:46px;padding:6px 16px;border-radius:16px;border:2px solid var(--pop-strong);background:var(--pop-surface);color:var(--pop-ink);font-weight:700;cursor:pointer}
body.home-page .overview-table th,body.home-page .overview-table td{border-bottom:2px solid #EFE7D4}
body.home-page .overview-table th{font-family:var(--pop-head);font-weight:400;font-size:16px}
body.home-page .island-friend{background:var(--pop-bg);border:2px solid var(--pop-line);color:var(--pop-ink)}
body.home-page .island-friend h3{font-family:var(--pop-head);font-weight:400}
body.home-page .island-friend h3 small{color:var(--pop-muted)}
body.home-page .island-friend b{color:var(--pop-primary)}
body.home-page .island-say{color:#6B4E00;font-weight:700}
body.home-page .island-games a{background:var(--pop-yellow);color:var(--pop-ink);font-weight:700}

/* 글자: 낱말 중간에서 줄을 바꾸지 않고, 제목은 줄 길이를 고르게 */
.home :is(h1,h2,h3,p,li),.splash :is(h1,p),dialog :is(h2,h3,p,li){word-break:keep-all;overflow-wrap:break-word}
.home :is(h1,h2,h3),dialog :is(h2,h3){text-wrap:balance}
.home p,dialog p,dialog li{text-wrap:pretty}