:root{
  --bg:#fff8f0; --card:#fff; --ink:#2b2b2b; --muted:#8a8a8a; --line:#f0e4d6;
  --red:#ef5350; --yellow:#ffcb05; --blue:#3b5ba9; --green:#4caf50;
  --r-common:#9e9e9e; --r-uncommon:#43a047; --r-rare:#5e6bd6; --r-legendary:#f5a623;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;font-size:16px;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:10px 14px;background:#eee;color:var(--ink)}
button.primary{background:var(--red);color:#fff;font-weight:700}
button.yellow{background:var(--yellow);color:#3a2a00;font-weight:700}
button.ghost{background:transparent;color:var(--muted)}
button:disabled{opacity:.45;cursor:default}
input,select{font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;width:100%;background:#fff}
h1,h2,h3{margin:0}
.small{font-size:13px;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.grow{flex:1}
.hidden{display:none!important}

#app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;background:var(--red);color:#fff;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.topbar h1{font-size:18px}
.topbar .who{font-size:13px;opacity:.9}
main{flex:1;padding:14px 14px 90px}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:5;background:#fff;border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.tabs{max-width:520px;margin:0 auto}
.tabs button{flex:1;background:none;border-radius:0;padding:10px 4px 8px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.tabs button .ic{font-size:22px}
.tabs button.on{color:var(--red);font-weight:700}
.badge{position:absolute;top:6px;right:calc(50% - 22px);background:var(--red);color:#fff;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px;font-weight:700}

.card{background:var(--card);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.card h3{font-size:15px;margin-bottom:8px}
.section-title{font-size:14px;color:var(--muted);margin:16px 0 8px;font-weight:700}

/* 가입 */
.auth{padding:40px 22px;text-align:center}
.auth .logo{font-size:64px}
.auth h2{margin:8px 0 4px}
.auth form{display:flex;flex-direction:column;gap:10px;margin-top:18px;text-align:left}
.auth label{margin-bottom:-6px;text-align:left}
.bigpick{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.bigpick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px;font-size:32px;background:#fff;border:2px solid var(--line);border-radius:18px}
.bigpick button b{font-size:18px}
.bigpick button:active{border-color:var(--red);background:#fff2f1}
.auth #back{position:absolute;left:8px;top:8px}
.auth{position:relative}

/* 미션 */
.mission{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.mission:last-child{border-bottom:0}
.mission{flex-wrap:wrap}
.dec-box{width:100%;margin-top:8px;background:#fffbe6;border:1.5px dashed #ffd54f;border-radius:12px;padding:10px}
.dec-row{display:flex;gap:6px;width:100%}
.dec-row button{flex:1;padding:14px 4px;font-size:15px;font-weight:800;border-radius:12px}
.dec-row .d-easy{background:#e8f5e9;color:#2e7d32}.dec-row .d-normal{background:#e3f2fd;color:#1565c0}.dec-row .d-hard{background:#fce4ec;color:#ad1457}
.dec-row .ghost{flex:0 0 auto;background:#f1f1f1}
.mission .t{font-weight:600}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#f1f1f1;color:#555;margin-right:4px}
.pill.easy{background:#e8f5e9;color:#2e7d32}.pill.normal{background:#e3f2fd;color:#1565c0}.pill.hard{background:#fce4ec;color:#ad1457}
.pill.review{background:#fff3e0;color:#e65100}.pill.approved{background:#e8f5e9;color:#2e7d32}.pill.rejected{background:#eee;color:#777}
.pill.evo{background:linear-gradient(135deg,#ffe082,#ffb300);color:#4a3000;font-weight:700}
.pill.rar-common{background:#eee;color:#666}.pill.rar-uncommon{background:#e8f5e9;color:#2e7d32}.pill.rar-rare{background:#e8eaf6;color:#3949ab}.pill.rar-legendary{background:#fff3e0;color:#ef6c00}

/* 알 */
.egg-offer{background:linear-gradient(160deg,#fff7d6,#ffe9b3);border-radius:18px;padding:14px;margin-bottom:12px}
.egg-offer .title{font-weight:700;margin-bottom:10px}
.eggs{display:flex;gap:8px}
.egg{flex:1;background:#fff;border-radius:14px;padding:10px 6px;text-align:center;border:2px solid transparent;cursor:pointer;position:relative}
.egg.on{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,83,80,.2)}
.egg .shell{width:56px;height:70px;margin:0 auto 6px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;position:relative;overflow:hidden}
.egg .shell::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),transparent 45%)}
.egg .shell .q{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:30px;font-weight:900;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.25)}
.egg .shell{background:var(--tc,#ccc);background-image:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 40%),radial-gradient(circle at 70% 70%,rgba(0,0,0,.08) 8px,transparent 9px),radial-gradient(circle at 35% 65%,rgba(0,0,0,.08) 6px,transparent 7px)}
.egg .nm{font-size:13px;font-weight:700}
/* 타입 색 (알 껍데기) */
.t-normal{--tc:#a8a878}.t-fire{--tc:#f08030}.t-water{--tc:#6890f0}.t-grass{--tc:#78c850}.t-electric{--tc:#f8d030}.t-ice{--tc:#98d8d8}.t-fighting{--tc:#c03028}.t-poison{--tc:#a040a0}.t-ground{--tc:#e0c068}.t-flying{--tc:#a890f0}.t-psychic{--tc:#f85888}.t-bug{--tc:#a8b820}.t-rock{--tc:#b8a038}.t-ghost{--tc:#705898}.t-dragon{--tc:#7038f8}.t-dark{--tc:#705848}.t-steel{--tc:#b8b8d0}.t-fairy{--tc:#ee99ac}
.daily{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#ffe0e0,#ffd6a5);border-radius:18px;padding:14px;margin-bottom:12px}
.daily .big{font-size:36px}

/* 부화 모달 */
#modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
#modal[hidden]{display:none}  /* display:flex 가 hidden 속성을 이기지 않도록 */
.hatch{background:#fff;border-radius:22px;padding:24px 18px;text-align:center;width:100%;max-width:360px}
.hatch{position:relative;overflow:hidden}
.hatch .stage{position:relative;height:190px;display:flex;align-items:center;justify-content:center}
.hatch .shell-big{position:relative;width:120px;height:150px;border-radius:50%/60% 60% 40% 40%;background:var(--tc,#ccc);background-image:radial-gradient(circle at 30% 25%,rgba(255,255,255,.6),transparent 42%),radial-gradient(circle at 70% 70%,rgba(0,0,0,.08) 12px,transparent 13px),radial-gradient(circle at 35% 68%,rgba(0,0,0,.08) 9px,transparent 10px);animation:wobble .5s ease-in-out 3;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.hatch .crack{position:absolute;left:18%;top:38%;width:64%;height:34%;opacity:0;background:
  linear-gradient(115deg,transparent 46%,#3a2a10 46%,#3a2a10 52%,transparent 52%) 0 0/34% 100% no-repeat,
  linear-gradient(65deg,transparent 46%,#3a2a10 46%,#3a2a10 52%,transparent 52%) 33% 0/34% 100% no-repeat,
  linear-gradient(115deg,transparent 46%,#3a2a10 46%,#3a2a10 52%,transparent 52%) 66% 0/34% 100% no-repeat}
.hatch.crack .shell-big{animation:shake .12s linear 6}
.hatch.crack .crack{opacity:.9;transition:opacity .2s}
.hatch .glow{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff6c2 35%,rgba(255,240,180,0) 70%);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.hatch.burst .glow{animation:burst .7s ease-out forwards}
.hatch.burst .shell-big{animation:vanish .5s ease-in forwards}
.hatch.burst::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:flash .7s ease-out;pointer-events:none}
.hatch.done .stage{display:none}
.hatch .reveal{display:none;position:relative}
.hatch.done .reveal{display:block;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.hatch .rays{position:absolute;left:50%;top:95px;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,214,90,.55) 0 9deg,rgba(255,214,90,0) 9deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%);animation:spin 10s linear infinite}
.hatch .reveal img{position:relative;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.hatch .reveal > div, .hatch .reveal > span{position:relative}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-3deg)}75%{transform:translateX(5px) rotate(3deg)}}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(28);opacity:0}}
@keyframes vanish{to{transform:scale(.6);opacity:0}}
@keyframes flash{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hatch .nm{font-size:22px;font-weight:800;margin-top:4px}
.hatch .lv{font-size:15px;color:var(--muted)}
.hatch .new{display:inline-block;background:var(--yellow);padding:2px 10px;border-radius:999px;font-weight:800;font-size:13px;margin-bottom:6px}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* 도감 */
.season-tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
.season-tabs button{white-space:nowrap;background:#fff;border:1.5px solid var(--line);font-size:13px;padding:8px 12px}
.season-tabs button.on{border-color:var(--red);color:var(--red);font-weight:700}
.season-tabs button.lock{color:#bbb}
.progress{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin:6px 0}
.progress i{display:block;height:100%;background:var(--green)}
.subtabs{display:flex;gap:6px;margin-bottom:12px;background:#fff;border-radius:14px;padding:4px}
.subtabs button{flex:1;background:transparent;font-weight:700;color:var(--muted);padding:10px}
.subtabs button.on{background:var(--red);color:#fff}
.sortbar{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.sortbar button{font-size:12px;padding:6px 10px;background:#fff;border:1.5px solid var(--line)}
.sortbar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcard{background:#fff;border-radius:14px;padding:8px 4px 6px;text-align:center;position:relative;border-top:4px solid var(--r-common)}
.pcard.r-uncommon{border-top-color:var(--r-uncommon)}.pcard.r-rare{border-top-color:var(--r-rare)}.pcard.r-legendary{border-top-color:var(--r-legendary)}
.pcard img{width:72px;height:72px;image-rendering:pixelated}
.pcard.miss img{filter:brightness(0) opacity(.6)}
.pcard.miss .nm{color:#999;letter-spacing:2px}
.pcard.miss{background:#f6f2ec}
.pcard .no{position:absolute;top:4px;left:8px;font-size:10px;color:#bbb}
.pcard .lv{position:absolute;top:4px;right:6px;font-size:11px;font-weight:800;color:var(--blue)}
.pcard .lv.max{color:#e65100}
.evo-btn{margin-top:6px;width:100%;padding:7px 4px;font-size:12px;font-weight:800;background:linear-gradient(135deg,#ffe082,#ffb300);color:#4a3000;border-radius:10px}
.evo-hint{margin-top:6px;font-size:10px;color:#aaa}
.pcard .nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.types{display:flex;gap:3px;justify-content:center;margin-top:3px;flex-wrap:wrap}
.ty{font-size:9px;color:#fff;padding:1px 5px;border-radius:999px;background:#999}
.ty.normal{background:#a8a878}.ty.fire{background:#f08030}.ty.water{background:#6890f0}.ty.grass{background:#78c850}.ty.electric{background:#f8d030;color:#333}.ty.ice{background:#98d8d8;color:#333}.ty.fighting{background:#c03028}.ty.poison{background:#a040a0}.ty.ground{background:#e0c068;color:#333}.ty.flying{background:#a890f0}.ty.psychic{background:#f85888}.ty.bug{background:#a8b820}.ty.rock{background:#b8a038}.ty.ghost{background:#705898}.ty.dragon{background:#7038f8}.ty.dark{background:#705848}.ty.steel{background:#b8b8d0;color:#333}.ty.fairy{background:#ee99ac}

/* 나눔 */
.trade-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.trade-row img{width:48px;height:48px;image-rendering:pixelated}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:240px;overflow:auto;margin:8px 0}
.pick-grid .pcard{padding:4px 2px}.pick-grid .pcard img{width:52px;height:52px}
.pick-grid .pcard.on{outline:3px solid var(--red)}

/* 알림 */
.notif{padding:10px 0;border-bottom:1px solid var(--line)}
.notif.unread{font-weight:700}
.notif .when{font-size:11px;color:var(--muted)}

/* 부모 — 아이 카드 */
.kid{display:flex;gap:10px;align-items:center}
.kid .top img{width:40px;height:40px;image-rendering:pixelated}

#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#333;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:30;pointer-events:none;max-width:90%;text-align:center}
#toast.show{opacity:1}
.empty{text-align:center;color:var(--muted);padding:24px 0;font-size:14px}
.code{font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:2px;background:#fff;padding:4px 10px;border-radius:8px;border:1.5px dashed var(--line)}