*{box-sizing:border-box}body{margin:0;background:#edf8e9;color:#23452e;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;line-height:1.7}a{text-decoration:none;color:inherit}.wrap{width:min(1120px,calc(100% - 28px));margin:auto}.top{background:#fff;border-bottom:1px solid #d7ead2}.topbar{min-height:58px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:900;color:#27633a;font-size:19px}.nav{display:flex;gap:6px}.nav a{padding:8px 12px;border-radius:999px}.nav a:hover{background:#e5f4df}.hero{padding:36px 0}.hero-card{background:linear-gradient(135deg,#fbfff9,#e0f3da);border:1px solid #cfe7c8;border-radius:32px;padding:42px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;box-shadow:0 18px 45px rgba(56,95,63,.12)}.eyebrow{background:#d8f0d2;color:#2d7042;padding:7px 14px;border-radius:999px;font-weight:900}.hero h1{font-size:clamp(40px,6vw,66px);line-height:1.12;color:#205d36;margin:18px 0 12px}.hero p{font-size:18px}.hero-rabbit{text-align:center}.hero-rabbit img{width:min(310px,85%);filter:drop-shadow(0 18px 16px rgba(40,80,50,.15))}.btns{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;border:2px solid #c9e2c2;background:#fff;border-radius:16px;padding:11px 17px;font-weight:900;cursor:pointer}.btn.primary{background:#62b56e;color:white;border-color:#62b56e}.section{padding:24px 0}.section h2{font-size:32px;color:#285e3a;margin:0}.lead{color:#58725e}.games{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}.game-card{background:#fff;border:1px solid #d5e9cf;border-radius:26px;padding:20px;display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;box-shadow:0 10px 26px rgba(50,90,58,.08)}.game-card img{width:110px;height:110px;object-fit:contain;background:#f2faef;border-radius:20px}.game-card h3{margin:3px 0;font-size:22px}.tag{font-size:13px;color:#4e8159;font-weight:900}.ad-slot{min-height:120px;border:1px dashed #b9d5b0;background:#f8fff6;border-radius:24px;display:flex;align-items:center;justify-content:center;color:#718574}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.principle,.panel{background:#fff;border:1px solid #d5e9cf;border-radius:24px;padding:24px;box-shadow:0 10px 26px rgba(50,90,58,.07)}.emoji{font-size:32px}.footer{margin-top:40px;background:#285d3a;color:#eef9ec}.footer-inner{padding:28px 0;display:flex;justify-content:space-between;gap:20px}.page{padding:36px 0}.home{float:right}.game-shell{background:#fff;border:1px solid #d5e9cf;border-radius:28px;padding:18px}.game-canvas-wrap{position:relative;max-width:600px;margin:auto}.game-canvas-wrap canvas{display:block;width:100%;height:auto;border-radius:18px}.music{position:absolute;top:10px;right:10px;z-index:2;border:0;border-radius:50%;padding:10px;background:white;box-shadow:0 3px 10px #0002}.math-scene{background:linear-gradient(#f8fff6,#fff);border:1px solid #d3e9cd;border-radius:28px;padding:24px;text-align:center}.math-stage{min-height:320px;display:flex;justify-content:center;align-items:center;gap:35px;flex-wrap:wrap}.rabbit-character{position:relative;text-align:center}.rabbit-character img{width:170px;height:170px;object-fit:contain}.thought{position:absolute;right:-10px;top:-10px;width:70px;height:70px;border:4px solid #6db575;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;font-size:34px}.carrots{font-size:40px;min-height:55px;max-width:500px}
.math-visual{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;min-height:150px;max-width:560px}
.carrot-group{display:flex;gap:6px;align-items:center;padding:12px 16px;border-radius:18px;background:#fff8e1;border:2px dashed #ffcc80;font-size:32px;line-height:1}
.math-plus-icon{font-size:34px;font-weight:900;color:#33691e}
.bundle-group{display:flex;flex-direction:column;align-items:center;gap:0}
.bundle-ribbon{font-size:20px;margin-bottom:-8px;z-index:1}
.bundle-box{display:flex;gap:5px;align-items:center;padding:14px 14px 10px;border-radius:12px 12px 26px 26px;background:linear-gradient(155deg,#f6e2c4,#e7c48c);border:2px solid #cf9f5f;font-size:28px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.carrot-eaten{display:inline-block;animation:carrotEatenPop .5s ease forwards}
@keyframes carrotEatenPop{0%{transform:scale(1) rotate(0);opacity:1}40%{transform:scale(1.35) rotate(-12deg);opacity:1}100%{transform:scale(.15) rotate(18deg);opacity:0}}.math-question{font-size:24px;font-weight:900}.math-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:600px;margin:18px auto}.math-option{background:#fff;border:2px solid #cde5c7;border-radius:18px;padding:13px;font-size:23px;font-weight:900;cursor:pointer}.feedback{min-height:42px;font-size:19px;font-weight:900}.happy{animation:bounce .55s ease 2}.sad{animation:shake .45s ease 2}@keyframes bounce{50%{transform:translateY(-18px) rotate(3deg)}}@keyframes shake{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.tetris-board{display:grid;grid-template-columns:repeat(10,1fr);width:min(440px,100%);aspect-ratio:10/16;margin:20px auto;background:#ffe3ee;border:7px solid #ffb8d3;border-radius:18px;overflow:hidden}.cell{border:none;background:transparent;display:flex;align-items:center;justify-content:center;font-size:21px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:560px;margin:20px auto}.memory-card{aspect-ratio:1;border:0;border-radius:18px;background:#cfe9c9;font-size:34px;cursor:pointer}.memory-card.open,.memory-card.matched{background:white;border:2px solid #9fce98}@media(max-width:760px){.topbar{flex-direction:column;align-items:flex-start;padding:10px 0}.hero-card{grid-template-columns:1fr;text-align:center;padding:28px 20px}.games,.principles{grid-template-columns:1fr}.game-card{grid-template-columns:85px 1fr}.game-card img{width:85px;height:85px}.math-options{grid-template-columns:repeat(2,1fr)}.footer-inner{flex-direction:column}.community-grid{grid-template-columns:1fr}}
html{scroll-behavior:smooth}
button,a{touch-action:manipulation}
.game-card,.btn,.math-option,.memory-card{user-select:none;-webkit-tap-highlight-color:transparent}
.app-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.music-home{border:2px solid #c9e2c2;background:#fff;border-radius:999px;padding:8px 13px;font-weight:900;cursor:pointer}
#installApp{display:none}
#installApp:not([hidden]){display:inline-flex}
.game-shell{touch-action:none}
.tetris-board{touch-action:none}
.celebration-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);text-align:center;z-index:2;background:rgba(255,255,255,.94);border:4px solid #b8dfae;border-radius:28px;padding:22px 30px;box-shadow:0 18px 55px rgba(45,90,55,.2);opacity:0}
.celebration-text strong{display:block;font-size:clamp(25px,5vw,48px);color:#28683b}
.celebration-text span{display:block;font-size:clamp(17px,3vw,27px);margin-top:4px;color:#5c765f}
#celebrationLayer{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
#celebrationLayer canvas{position:absolute;inset:0;width:100%;height:100%}
#celebrationLayer.show .celebration-text{animation:celebrateIn .55s ease forwards}
@keyframes celebrateIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:760px){
  .wrap{width:min(100% - 20px,1120px)}
  .topbar{gap:7px}
  .nav{overflow-x:auto;max-width:100%;width:100%}
  .nav a{white-space:nowrap}
  .hero-card{padding:24px 16px}
  .hero-rabbit img{width:min(250px,80vw)}
  .math-stage{min-height:270px;gap:14px}
  .rabbit-character img{width:145px;height:145px}
  .carrots{font-size:32px}
  .tetris-board{width:min(360px,94vw)}
  .game-shell{padding:8px}
}

.page-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:8px;min-height:52px}.page-tools .home{float:none}.music-global,.music-home{width:48px;height:48px;border:2px solid #c9e2c2;background:#fff;border-radius:50%;font-size:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 14px rgba(45,90,55,.12);touch-action:manipulation}.music-global:hover,.music-home:hover{transform:translateY(-1px);background:#f7fff4}.music-global:active,.music-home:active{transform:translateY(1px)}
.tetris-board .cell{font-size:22px;text-shadow:0 1px 1px #fff}.tetris-board .cell:not(:empty){background:linear-gradient(145deg,#fffdfd,#ffeef6);border-radius:7px;box-shadow:inset 0 -3px 0 rgba(255,182,209,.35),inset 0 2px 0 rgba(255,255,255,.85)}
.memory-card{position:relative;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#dff2d8,#c5e7bd);border:3px solid #a8d29e;box-shadow:inset 0 2px 0 rgba(255,255,255,.85),0 5px 12px rgba(53,95,58,.08);transition:transform .16s ease}.memory-card:active{transform:scale(.96)}.memory-card .card-back,.memory-card .card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}.memory-card .card-back img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(40,70,45,.12))}.memory-card .card-face{font-size:42px;opacity:0;transform:scale(.65);transition:.18s ease}.memory-card.open .card-back,.memory-card.matched .card-back{opacity:0}.memory-card.open .card-face,.memory-card.matched .card-face{opacity:1;transform:scale(1)}.memory-card.matched{background:#fff9e8;border-color:#f0d27b}.game-note{text-align:center;color:#5d7562}.game-canvas-wrap{background:linear-gradient(#f4fff1,#fff);border-radius:18px;padding:6px}.game-canvas-wrap canvas{background:#f7fff4}

/* ===== 커뮤니티: 로그인/회원가입 + 실시간 채팅 ===== */
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;align-items:start}
.auth-panel h3,.chat-panel h3{margin:0 0 14px;font-size:19px;color:#285e3a;text-align:center}
.user-panel{display:none;text-align:center}
.user-panel p{margin:0 0 10px;font-weight:900;color:#285e3a}
.auth-tabs{display:flex;gap:8px;margin-bottom:14px}
.auth-tab{flex:1;padding:9px;text-align:center;border:2px solid #cde5c7;border-radius:12px;cursor:pointer;font-weight:900;font-size:13px;color:#6b8c70;background:#f7fff4}
.auth-tab.active{background:#62b56e;color:#fff;border-color:#62b56e}
.auth-form{display:none}
.auth-form.active{display:block}
.auth-form input{width:100%;padding:10px 12px;margin-top:9px;border:2px solid #cde5c7;border-radius:12px;font-size:14px;font-family:inherit}
.auth-form input:focus{outline:none;border-color:#62b56e}
.auth-form button{width:100%;margin-top:12px}
.auth-status{margin-top:10px;text-align:center;font-size:13px;font-weight:900;min-height:18px}
.verify-note{font-size:13px;color:#5d7562;margin-bottom:8px}
.chat-messages{height:280px;overflow-y:auto;border:1px solid #e2f0dc;border-radius:14px;padding:10px 12px;background:#f9fff6;display:flex;flex-direction:column;gap:8px}
.chat-msg{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4}
.chat-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:1px;border:1px solid #cfe7c8}
.chat-avatar-guest{width:24px;height:24px;border-radius:50%;background:#e2eede;color:#6b8c70;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.chat-nickname{font-weight:900;color:#285e3a;margin-right:4px}
.chat-nickname.guest{color:#8a9c8d}
.chat-text{color:#33452f;word-break:break-word}
.chat-time{font-size:10px;color:#a9bfa9;margin-left:4px}
.chat-input-row{display:flex;gap:8px;margin-top:12px}
.chat-input-row input{flex:1;padding:10px 12px;border:2px solid #cde5c7;border-radius:12px;font-size:13px;font-family:inherit}
.chat-input-row input:focus{outline:none;border-color:#62b56e}
.chat-input-row button{padding:0 18px}
@media(max-width:760px){.page-tools{margin-bottom:4px}.music-global,.music-home{width:44px;height:44px}.page{padding-top:18px}.memory-grid{gap:8px}.memory-card .card-face{font-size:34px}}