: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}
.modepick{display:flex;gap:8px}
.modepick.col{flex-direction:column}
.modepick button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;font-size:26px;background:#fff;border:2px solid var(--line);border-radius:16px;position:relative}
.modepick button b{font-size:16px}
.modepick button.on{border-color:var(--red);background:#fff2f1}
.modebox{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px}
.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}
.mtools{display:flex;gap:2px;margin-top:2px}
.mtools button{padding:2px 6px;font-size:14px;line-height:1.2;opacity:.55}
.mtools button:active{opacity:1}
.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}
.dec.quick{background:#e8f5e9;color:#2e7d32;font-weight:800;padding:9px 14px;border-radius:12px;font-size:14px;border:1.5px solid #a5d6a7;white-space:nowrap}
.dec.quick:active{background:#c8e6c9}
.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.proposed{background:#e8eaf6;color:#3949ab}.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-normal{background:#eee;color:#666}.pill.rar-royal{background:#fde7f3;color:#c2185b}.pill.rar-legend{background:#ede7f6;color:#5e35b1}
.ty.emo{background:#ff8fb1}
.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}
.egg.tp .shadowbox{width:64px;height:64px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.egg.tp .shadowbox img,.egg.tp .shadowbox .blob{width:60px;height:60px;filter:brightness(0) opacity(.72)}
.egg-offer.tp{background:linear-gradient(160deg,#ffe7f3,#ffd6ea)}
/* 그림 파일이 없을 때 대신 그리는 색 블롭 */
.blob{background:var(--c,#ddd);border-radius:52% 48% 46% 54%/54% 50% 50% 46%;display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto;box-shadow:inset 0 -6px 10px rgba(0,0,0,.08)}
.blob span{font-size:15px;font-weight:800;color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.25)}
/* 아직 그림이 없는 캐릭터: 물음표 실루엣 */
.blob.soon{background:#5c5c5c}
.blob.soon span{font-size:32px;color:#fff;opacity:.9}
.hatch .reveal .blob.soon span{font-size:74px}
.blob.shade{filter:brightness(0) opacity(.72)}
.blob.shade span{opacity:0}
/* 타입 색 (알 껍데기) */
.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,.hatch .reveal .blob{position:relative;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.hatch .reveal .blob span{font-size:34px}
.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 .shadow-big{position:relative;display:flex;align-items:center;justify-content:center}
.hatch .shadow-big img,.hatch .shadow-big .blob{width:150px;height:150px;filter:brightness(0) opacity(.78);animation:float 1.6s ease-in-out infinite}
.hatch .ring{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border:5px dashed #ff7aa8;border-radius:50%;opacity:.0}
.hatch.crack .ring{opacity:1;animation:closein .8s ease-in forwards}
.hatch.crack .shadow-big img,.hatch.crack .shadow-big .blob{animation:shake .12s linear 6}
.hatch.burst .shadow-big{animation:vanish .5s ease-in forwards}
.hatch .bigpic{display:flex;justify-content:center}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* 진화: 원래 포켓몬이 하얗게 빛나다 번쩍이며 바뀐다 */
.hatch .evo-stage{flex-direction:column;height:230px}
.hatch .evo-from{position:relative;display:flex;align-items:center;justify-content:center}
.hatch .evo-from img,.hatch .evo-from .blob{width:170px;height:170px;object-fit:contain;animation:evoglow 2.3s ease-in forwards}
.hatch .evo-aura{position:absolute;left:50%;top:44%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,240,170,.6) 35%,rgba(255,240,170,0) 70%);opacity:0;animation:aurapulse 2.3s ease-in forwards;pointer-events:none}
.hatch .evo-label{margin-top:8px;font-size:13px;color:var(--muted);animation:blink 1s ease-in-out infinite}
.hatch.crack .evo-from img,.hatch.crack .evo-from .blob{animation:evoglow 2.3s ease-in forwards,shake .1s linear infinite}
.hatch.burst .evo-from{animation:vanish .5s ease-in forwards}
.hatch.burst .evo-aura,.hatch.burst .evo-label{opacity:0}
.hatch .evo-badge{background:linear-gradient(135deg,#ffe082,#ffb300);color:#4a3000}
@keyframes evoglow{0%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0))}45%{filter:brightness(1.4) drop-shadow(0 0 14px rgba(255,255,255,.8))}100%{filter:brightness(6) saturate(0) drop-shadow(0 0 40px #fff);transform:scale(1.12)}}
@keyframes aurapulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}40%{opacity:.5}100%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}
/* 회수: 캐릭터가 회색으로 바래며 빠져나간다 */
.hatch.penalty{background:#2b2b2b;color:#fff}
.hatch.penalty .small,.hatch.penalty .lv{color:#bbb}
.pen-title{font-size:22px;font-weight:900;color:#ff8a80}
.pen-reason{font-size:17px;font-weight:700;margin:6px 0 2px}
.pen-pic{display:flex;justify-content:center;margin:12px 0 6px}
.pen-pic img,.pen-pic .blob{width:160px;height:160px;object-fit:contain;transition:filter 1.6s ease,transform 1.6s ease,opacity 1.6s ease}
.hatch.penalty.taken .pen-pic img,.hatch.penalty.taken .pen-pic .blob{filter:grayscale(1) brightness(.5);transform:translateY(-30px) scale(.7);opacity:.35}
@keyframes closein{from{transform:scale(1.5);opacity:.2}to{transform:scale(.7);opacity:1}}
.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;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:auto}
.season-tabs::-webkit-scrollbar{display:none}
.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}
.kidfilter{position:sticky;top:calc(52px + env(safe-area-inset-top));z-index:4;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.kidfilter .cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fff;color:var(--red);font-size:11px;line-height:18px}
.kidfilter button:not(.on) .cnt{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.r-normal{border-top-color:#bdbdbd}.pcard.r-royal{border-top-color:#ec407a}.pcard.r-legend{border-top-color:#7e57c2}
.pcard img{width:72px;height:72px;image-rendering:pixelated}
.pcard.miss img,.pcard.miss .blob{filter:brightness(0) opacity(.6)}
.pcard .blob{width:64px;height:64px}
.pick-grid .pcard .blob{width:48px;height:48px}
.trade-row .blob,.kid .top .blob{width:44px;height:44px}
.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;color:var(--ink);padding:4px 10px;border-radius:8px;border:1.5px dashed var(--line)}
.topbar .code{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.55)}