/* 두더지네 숫자 놀이터와 같은 느낌: 민트 하늘 + 초록 언덕 + 크림색 둥근 카드 + 주아 글꼴 */
:root{--sky:#E3F4EE;--grass:#B7DE95;--grass-deep:#8CC673;--ink:#3A2F2A;--ink-soft:#6E625A;--cream:#FFF9EE;--ledge:#D3DED6;--apricot:#FF9F6E;--teal:#4FB3A5;--butter:#FFD873;
--font:"Jua","Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--sky);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;min-height:100vh;position:relative;overflow-x:hidden}
/* 바닥: 낮은 언덕 + 새싹 + 작은 꽃 */
:root{--gh:clamp(120px,19vh,220px)}
.ground{position:fixed;left:0;right:0;bottom:0;height:var(--gh);z-index:-1;pointer-events:none}
.ground .hill{position:absolute;inset:0;width:100%;height:100%;display:block}
.ground i{position:absolute;transform:translateX(-50%);line-height:0}
.ground .sp{width:calc(30px*var(--s));height:calc(30px*var(--s));display:block}
.ground .fl{width:14px;height:14px;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* 맨 위 줄 */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.logo{font-size:24px;letter-spacing:.01em}
.logo{font-family:"Fredoka","Jua",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.logo .j{color:var(--apricot)}.logo .r{color:var(--ink)}.logo .p{color:var(--teal)}
.sprout{width:.36em;height:.45em;vertical-align:top;margin-left:.04em;margin-top:.05em}
nav{display:flex;gap:8px}
nav a{background:var(--cream);padding:6px 16px;border-radius:999px;box-shadow:0 4px 0 var(--ledge);font-size:18px}
nav a.on{background:var(--teal);color:#fff;box-shadow:0 4px 0 #3C8F84}

main{padding-block:16px 120px}
.title{text-align:center;font-size:30px;font-weight:400;margin:8px 0 24px}

/* 크림색 카드 공통 */
.card{background:var(--cream);border-radius:34px;box-shadow:0 10px 0 var(--ledge);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 13px 0 var(--ledge)}
.card:active{transform:translateY(6px);box-shadow:0 4px 0 var(--ledge)}

/* 첫 화면 */
.hero{text-align:center;padding-block:40px 56px}
.hero .logo{white-space:nowrap;font-size:64px;line-height:1.1;display:inline-block;position:relative}
.hero .tagline{margin:10px 0 0;font-size:20px;color:#6B5F57;letter-spacing:.02em}
.home{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.home a{display:flex;align-items:center;justify-content:center;gap:.4em;min-height:150px;font-size:40px}
.home .ico{width:1.3em;height:1.3em;flex:none}

/* 게임 */
.games{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 20px}
.game{width:calc((100% - 40px)/3);padding:18px 18px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.game img{width:100%;max-width:100%;aspect-ratio:1;border-radius:26px;display:block}
.game h2{margin:0;font-weight:400;font-size:24px;line-height:1.25}
.game .tag{margin:-6px 0 0;font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
.game .tag b{display:inline-block;font-weight:400;color:#fff;background:var(--teal);border-radius:999px;padding:1px 10px;margin-bottom:4px;font-size:15px}

/* 테스트: zip 폴더 모양 그대로 */
.note{text-align:center;color:var(--ink-soft);margin:-14px 0 24px}
.folders{display:flex;flex-direction:column;gap:22px}
.folder{padding:20px 22px 12px}
.folder:hover{transform:none;box-shadow:0 10px 0 var(--ledge)}
.folder h2{margin:0 0 6px;font-weight:400;font-size:26px;color:var(--teal)}
.file{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;padding:12px 0;border-top:2px dashed var(--ledge)}
.fname{font-size:18px;min-width:0;overflow-wrap:anywhere}
.fname:hover{color:var(--teal)}
.acts{display:flex;gap:8px}
.btn{font-size:16px;padding:7px 14px;border-radius:14px;background:#fff;box-shadow:0 4px 0 var(--ledge)}
.btn.main{background:var(--teal);color:#fff;box-shadow:0 4px 0 #3C8F84}
.all-folder{background:var(--butter);box-shadow:0 10px 0 #E2B94F}
.all-folder:hover{box-shadow:0 10px 0 #E2B94F}
.all-folder h2{color:var(--ink)}
.all-folder .file{border-top-color:#E2B94F}

@media (max-width:640px){
 .game{width:calc((100% - 20px)/2);padding:12px 12px 16px;border-radius:28px}
 .game img{border-radius:20px}.game h2{font-size:20px}.game .tag{font-size:11px}.game .tag b{font-size:13px}
 .hero .logo{font-size:52px}.home{grid-template-columns:1fr;gap:20px}.home a{min-height:110px;font-size:36px}
 .logo{font-size:20px}nav a{padding:5px 12px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

/* 첫 화면: 컴퓨터처럼 넓은 화면에서는 위아래 가운데에 */
.home-main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-block:24px calc(var(--gh) + 16px)}
.home-main .hero{padding-block:0 48px}

.lh{display:flex;align-items:center;gap:10px}
.back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#FFF9EE;color:#3A2F2A;box-shadow:0 3px 0 #D3DED6;flex:none}
.back:active{transform:translateY(2px);box-shadow:0 1px 0 #D3DED6}

/* 화면 기준: 휴대폰(~640) / 노트북·태블릿(641~1439) / 교실 TV·전자칠판(1440~, 풀HD 1920×1080 기준) */
@media (min-width:1440px) and (min-height:760px){.hero,.home,.sum,.stamps,header .wrap,.title,.games{zoom:1.3}}
@media (min-width:1800px) and (min-height:900px){.hero,.home,.sum,.stamps,header .wrap,.title,.games{zoom:1.45}}

/* 새 소식 */
.news{display:table;margin:0 auto 18px;font-size:15px;background:#fff;border-radius:999px;padding:4px 14px 4px 5px;box-shadow:0 3px 0 var(--ledge);color:var(--ink)}
.news b{font-family:"Fredoka",var(--font);font-weight:600;font-size:12px;color:#fff;background:var(--apricot);border-radius:999px;padding:2px 8px;margin-right:8px;letter-spacing:.04em}
/* 한 줄 요약 */
.sum{text-align:center;margin:18px 0 0;font-size:15px;color:var(--ink-soft);letter-spacing:.02em}
/* 칭찬 도장 */
.stamps{margin:16px auto 0;max-width:520px;width:100%;background:rgba(255,249,238,.85);border-radius:22px;padding:12px 16px 14px;box-shadow:0 4px 0 var(--ledge)}
.st-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.st-head span{font-size:17px}.st-head small{font-size:13px;color:var(--ink-soft)}
.st-row{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.st-row i{aspect-ratio:1;border-radius:50%;border:2px dashed #CFE0D6;display:block;overflow:hidden}
.st-row i.on{border:2px solid #fff;box-shadow:0 0 0 2px var(--teal)}
.st-row img{width:100%;height:100%;object-fit:cover;display:block}
.st-go{display:block;text-align:center;margin-top:10px;font-size:15px;color:var(--teal)}
.st-go[hidden]{display:none}
.home-main .hero{padding-block:0 36px}
/* PC: 게임 화면 내용을 화면 위아래 가운데로 */
@media (min-width:641px){.gmain{min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px);display:flex;flex-direction:column;justify-content:center;padding-block:8px calc(var(--gh) * .7)}.gmain .stamps{margin-top:24px}}
/* PC: 첫 화면 요소 사이 간격 넓게 */
@media (min-width:641px){.home-main .news{margin-bottom:44px}.home-main .hero .tagline{margin-top:18px}.home-main .hero{padding-bottom:76px}.home-main .home{gap:40px}.home-main .sum{margin-top:44px}}
/* 학습지 카드 NEW 강조표 */
.home a{position:relative}
.home .new{position:absolute;top:-12px;right:22px;font-family:"Fredoka",var(--font);font-weight:600;font-size:16px;line-height:1;color:#fff;background:var(--apricot);border-radius:999px;padding:7px 13px 6px;letter-spacing:.05em;box-shadow:0 3px 0 #E07F52;transform:rotate(6deg)}
@media (max-width:640px){.home .new{font-size:13px;padding:6px 10px 5px;top:-10px;right:16px}}
/* 첫 화면 맨 아래 문의 */
.contact{position:fixed;left:0;right:0;bottom:10px;z-index:2;margin:0;text-align:center;font-size:13px;color:rgba(58,47,42,.42);letter-spacing:.02em}
.contact a{color:inherit;text-decoration:none}
.contact a:hover{text-decoration:underline}
/* 첫 화면 소개 한 줄 */
.about{text-align:center;margin:8px 0 0;font-size:14px;color:rgba(58,47,42,.55);word-break:keep-all}
@media (min-width:641px){.home-main .about{margin-top:10px}}
.contact .by{display:block;margin-bottom:3px;color:rgba(58,47,42,.36);word-break:keep-all}
.contact .by{white-space:nowrap}
@media (max-width:400px){.contact{font-size:12px}}
/* 게임 카드와 칭찬 도장 사이 간격 */
.gmain .stamps{margin-top:32px}
@media (min-width:641px){.gmain .stamps{margin-top:56px}}