:root{
  --bg:#f7f2ed;--paper:#fffdf9;--paper2:#fff9f3;--line:#e7d9cd;--text:#443832;--muted:#8f7e76;
  --rose:#ef8fa3;--rose2:#ffe3e9;--gold:#e2b15c;--green:#79be8a;--blue:#72b5dd;--lav:#aa95d7;
  --shadow:0 10px 28px rgba(92,67,51,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 50% -10%,#fff 0,#fbf6f0 42%,#f3ece5 100%);
color:var(--text);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.app{width:min(100%,570px);margin:auto;padding:10px 10px 30px}
.hidden{display:none!important}
.logo{font-weight:1000;font-size:28px;letter-spacing:-1.4px}.logo b{color:var(--rose)}
.sub{font-size:10px;color:var(--muted);line-height:1.45}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.resources{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pill{padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:10px;font-weight:900;box-shadow:0 4px 12px rgba(92,67,51,.06)}
.card,.panel{border:1px solid var(--line);background:linear-gradient(145deg,var(--paper),var(--paper2));border-radius:18px;box-shadow:var(--shadow)}
.panel{padding:12px;margin-top:9px}
.menuHero{overflow:hidden}
.menuScene{height:clamp(250px,52vw,340px);background:#ead7c1 url('assets/pet-story-menu-v2.webp') center 62%/cover no-repeat;position:relative}
.menuScene::after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(transparent,rgba(49,31,20,.2));pointer-events:none}
.menuTxt{padding:14px}.menuTxt p{font-size:12px;color:var(--muted);line-height:1.6}
.badge{display:inline-block;padding:4px 8px;background:#fff0d2;color:#9a6a18;border-radius:999px;font-weight:900;font-size:9px}
.bigBtn{width:100%;min-height:48px;margin-top:8px;border:1px solid #deb3bc;border-radius:13px;background:linear-gradient(#ffe7ec,#ffdce3);font-weight:1000}
.bigBtn.secondary{background:#fff;border-color:var(--line)}
.hero{position:relative;overflow:hidden;min-height:405px}
#scene{display:block;width:100%;height:auto;background:#eadccf url('assets/pet-story-room-v2.webp') center/cover no-repeat}
.ownerChip{position:absolute;right:10px;top:10px;width:58px;height:58px;border-radius:50%;overflow:hidden;background:white;border:2px solid white;box-shadow:0 5px 16px rgba(80,54,41,.15)}
.character-img{display:block;width:100%;height:100%;object-fit:contain}.owner-portrait{object-fit:cover;object-position:center 12%;transform:scale(1.08);transform-origin:50% 15%}.owner-dialog{object-fit:cover;object-position:center 10%;transform:scale(1.12);transform-origin:50% 12%}.owner-preview{height:100%;object-fit:contain;object-position:center top}.pet-render{filter:drop-shadow(0 5px 5px rgba(70,45,30,.14))}
.petChip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#fffdf9ed;border:1px solid #e9d5c1;border-radius:15px;padding:8px 10px;box-shadow:0 5px 16px rgba(80,54,41,.12);backdrop-filter:blur(5px)}
.petChip b{font-size:14px;display:block}.petChip small{font-size:9px;color:var(--muted)}
.speech{position:absolute;right:12px;top:78px;width:min(43%,190px);z-index:3;background:#fffdf9ef;border:1px solid #ead8c8;border-radius:16px 16px 5px 16px;padding:9px 10px;font-size:10px;line-height:1.4;word-break:keep-all;box-shadow:0 5px 14px rgba(80,54,41,.10)}
.goal{position:absolute;left:10px;right:10px;bottom:10px;padding:10px;background:#fffdf9f4;border:1px solid #ead8c8;border-radius:14px;box-shadow:0 5px 15px rgba(80,54,41,.10)}
.goal .kicker{font-size:9px;font-weight:1000;color:#c46d7d}.goal b{display:block;font-size:12px;margin-top:2px}
.progress{height:7px;background:#eee3db;border-radius:999px;overflow:hidden;margin-top:6px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#ef8da1,#eec36d)}
.phaseBar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.phase{border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 4px;text-align:center;font-size:9px;color:var(--muted)}
.phase b{display:block;color:var(--text);font-size:11px}.phase.on{background:#fff0f3;border-color:#e9a8b5}.phase.done{opacity:.46}
.statGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stat{border:1px solid var(--line);background:white;border-radius:12px;padding:7px;text-align:center;font-size:9px;color:var(--muted);box-shadow:0 4px 10px rgba(80,54,41,.06)}
.stat b{display:block;font-size:13px;color:var(--text);margin-top:2px}
.choiceGrid,.shopGrid,.breedGrid,.miniGrid,.albumGrid,.traitGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.choice,.shopItem,.breed,.miniCard,.albumItem,.trait{border:1px solid var(--line);border-radius:13px;background:#fff;padding:9px;text-align:left;min-height:90px}
.choice b,.shopItem b,.breed b,.miniCard b,.trait b{display:block}
.choice small,.shopItem small,.breed small,.miniCard small,.albumItem small,.trait small{display:block;font-size:9px;color:var(--muted);line-height:1.4;margin-top:3px}
.choice.recommended{border-color:#e8a4b1;background:#fff2f4}
.choice:disabled,.shopItem:disabled,.breed:disabled{opacity:.4}
.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:10px}
.tab{min-height:43px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:9px;font-weight:900}.tab.on{background:#ffe7eb;border-color:#e8a9b4}
.storyList{display:grid;gap:7px}.storyItem{border:1px solid var(--line);border-radius:13px;background:#fff;padding:9px}.storyItem b{display:block;font-size:11px}.storyItem small{display:block;font-size:9px;color:var(--muted);margin-top:3px;line-height:1.4}
.price{font-size:9px;color:#ad7928;font-weight:900}.owned{font-size:9px;color:#4c9461;font-weight:900}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:7px}.label{font-size:10px;color:var(--muted)}
input[type=text]{width:100%;min-height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 10px;font-size:16px}
.genderRow{display:grid;grid-template-columns:1fr 1fr;gap:7px}.genderBtn{min-height:43px;border:1px solid var(--line);border-radius:11px;background:#fff;font-weight:900}.genderBtn.on{background:#edf7ff;border-color:#8ab7d5}
.avatarPreview,.petPreview{height:118px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:11px;background:linear-gradient(#fff8f4,#f3e6df)}.avatarPreview svg,.petPreview svg{width:92px;height:92px}.avatarPreview img,.petPreview img{width:100%;height:100%;object-fit:contain}
.avatarChoice,.breed.selected,.trait.selected{border-color:#e999aa!important;background:#fff0f3!important}
.overlay{position:fixed;inset:0;background:rgba(66,46,37,.56);display:none;align-items:center;justify-content:center;padding:13px;z-index:60}.overlay.on{display:flex}
.modal{width:min(530px,100%);max-height:91vh;overflow:auto;background:#fffdf9;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 22px 55px rgba(42,29,24,.28)}
.modal h2{margin:0 0 5px;font-size:20px}.modal p{font-size:11px;color:var(--muted);line-height:1.55}
.dialogue{display:grid;grid-template-columns:74px 1fr;gap:9px;align-items:center}.avatarCircle{width:72px;height:72px;border-radius:50%;overflow:hidden;border:1px solid #d5dfe5;background:#edf3f6}.dialogBox{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px;font-size:11px;line-height:1.5}
.notice{padding:8px;border:1px solid #efddb8;background:#fff7e6;border-radius:11px;color:#80683a;font-size:9px;line-height:1.4}
.questReq{display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px 0;border-bottom:1px dashed #eaded4;font-size:10px}.questReq:last-child{border-bottom:0}.ok{color:#4b9860;font-weight:900}.no{color:#b27b32;font-weight:900}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#453832eb;color:#fff;border-radius:999px;padding:8px 13px;font-size:10px;opacity:0;pointer-events:none;transition:.18s;z-index:90}.toast.on{opacity:1}
.albumPic{height:105px;border-radius:10px;background:linear-gradient(135deg,#ffe8dc,#e8f5fb);display:flex;align-items:center;justify-content:center;overflow:hidden}.albumPic svg{width:92px;height:92px}
.skillRow{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed #eaded4}.skillRow:last-child{border-bottom:0}.skillRow b{font-size:10px}.skillRow small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.skillBar{height:7px;background:#eee3db;border-radius:999px;overflow:hidden;margin-top:4px}.skillBar i{display:block;height:100%;background:#7fbe8c}
.placeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.place{border:1px solid var(--line);border-radius:13px;background:#fff;padding:8px;text-align:center;min-height:82px}.place span{font-size:24px;display:block}.place b{font-size:10px}.place small{display:block;font-size:8px;color:var(--muted);margin-top:2px}
.miniArea{position:relative;height:305px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(#dff3fb 0 55%,#d9edbf 55%);margin-top:8px}
.miniHud{display:flex;justify-content:space-between;font-size:10px;font-weight:900}
.target{position:absolute;border:0;background:transparent;font-size:31px;width:44px;height:44px}
.movePet{position:absolute;width:74px;height:74px;bottom:15px;left:50%;transform:translateX(-50%)}
.obstacle{position:absolute;font-size:31px}
.photoFrame{position:absolute;width:116px;height:116px;border:4px solid rgba(255,255,255,.72);box-shadow:0 0 0 2px #f0a1b0 inset;border-radius:18px}
.weekly{background:linear-gradient(135deg,#fff4d9,#ffe8ef);border:1px solid #ead4aa;border-radius:13px;padding:9px}
.houseBadge{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:999px;background:#eef6ff;color:#527c9c;font-size:8px;font-weight:900}
@media(max-width:410px){
 .tabs{grid-template-columns:repeat(3,1fr)}
 .choiceGrid,.shopGrid,.breedGrid,.miniGrid,.albumGrid,.traitGrid{grid-template-columns:1fr}
 .statGrid{grid-template-columns:repeat(2,1fr)}
 .placeGrid{grid-template-columns:repeat(2,1fr)}
}

button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.42; }
button:focus-visible,a:focus-visible { outline:3px solid #8ddbe8; outline-offset:3px; }
button:not(:disabled):hover { filter:brightness(1.14); }
button:not(:disabled):active { transform:translateY(1px); }
.storage-warning { position:fixed;bottom:0;left:0;right:0;z-index:300;background:#6b3e10;color:#fff;padding:10px;text-align:center;font-size:12px; }
.edition { color:#b8d5d0;font-size:10px;letter-spacing:2px;font-weight:800;margin-bottom:10px; }
.guide { margin:16px 0 0;padding:12px;border:1px solid #364753;border-radius:10px;font-size:12px;color:#bac9ce;line-height:1.7; }
.guide summary { cursor:pointer;color:#e8d2a0;font-weight:800; }
.guide kbd { color:#f5dfae;background:#25303b;border:1px solid #506074;border-radius:4px;padding:1px 5px; }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.app{width:min(1120px,100%);padding:24px max(14px,env(safe-area-inset-left)) max(30px,env(safe-area-inset-bottom))}
#menu{max-width:570px;margin:2vh auto}.edition{color:#997961}.guide{color:#736158;border-color:#e0c8b7;background:#fff9f4}.guide summary{color:#875a46}.guide kbd{color:#70482f;background:#fff;border-color:#ccb39b}
.logo{font-size:clamp(25px,4vw,36px)}.sub{font-size:12px}.menuTxt{padding:24px}.menuTxt p{font-size:14px}.badge{font-size:11px}.notice{font-size:12px;line-height:1.6}
.hero{min-height:0}.petChip b{font-size:16px}.petChip small{font-size:11px}.speech{font-size:12px;max-width:43%}.goal b{font-size:14px}.goal .kicker{font-size:11px}
.choice,.shopItem,.breed,.trait{min-height:100px;padding:13px}.choice small,.shopItem small,.breed small,.trait small,.storyItem small,.albumItem small{font-size:12px}.storyItem b{font-size:13px}.stat{font-size:12px}.stat b{font-size:18px}.pill{font-size:12px}.tab{font-size:12px;min-height:46px}.phase{font-size:11px}.phase b{font-size:13px}
.overlay{backdrop-filter:blur(5px)}.modal{max-width:630px;max-height:calc(100dvh - 28px);padding:22px;overscroll-behavior:contain}.modal h2{font-size:24px}.modal p{font-size:13px}.dialogBox{font-size:13px}.questReq{font-size:13px}.price,.owned{font-size:12px}.skillRow small{font-size:11px}.skillRow b{font-size:12px}.place small{font-size:11px}.place b{font-size:12px}
.stat.low{background:#fff0e4;border-color:#d78b5e}.miniArea{touch-action:manipulation}.target{width:48px;height:48px}.timingTrack{position:relative;height:30px;background:#efe6d9;border-radius:10px;overflow:hidden;margin:15px 0}.timingGood{position:absolute;left:62%;width:20%;height:100%;background:#99d3aa}.timingCursor{position:absolute;top:0;bottom:0;width:5px;background:#754e76;border:1px solid white}.miniPaused{padding:8px;background:#fff4d9;border-radius:8px;color:#7a5831;font-size:12px}
@media(min-width:850px){#game{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:14px 24px;align-items:start}#game>.top{grid-column:1/-1}.phaseBar{grid-column:1;grid-row:2;margin:0}.hero{grid-column:1;grid-row:3}.statGrid{grid-column:1;grid-row:4;margin:0!important}#phaseActions{grid-column:2;grid-row:2/5;margin:0}.tabs{grid-column:1/-1;margin:0}#content,#saveBtn{grid-column:1/-1}.storyList{grid-template-columns:repeat(3,1fr)}.albumGrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:500px){.app{padding-top:12px}.menuTxt{padding:18px}.modal{padding:16px}.formRow{grid-template-columns:1fr}.traitGrid,.breedGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.choiceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice{padding:10px;min-height:108px}.choice b{font-size:13px}.choice small{font-size:11px}.statGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{font-size:10px;padding:7px 3px}.stat b{font-size:15px}.speech{font-size:10px;top:66px;width:42%;padding:7px}.ownerChip{width:48px;height:48px}.petChip{max-width:53%}.petChip b{font-size:13px}.goal{padding:8px}.goal b{font-size:11px}.top{align-items:flex-start}.resources{max-width:115px}.logo{font-size:25px}.top .sub{font-size:10px}.tabs{position:sticky;top:0;z-index:5;padding:7px 0;background:#faf4ee;grid-template-columns:repeat(3,1fr)}}

.sound-toggle{border:1px solid #627381;border-radius:999px;background:transparent;color:inherit;padding:9px 14px;font-size:11px;min-height:44px;margin-top:10px}
.mode-note{font-size:12px;line-height:1.65;opacity:.8;margin:8px 0 12px}.quick-button{width:100%;min-height:54px;background:linear-gradient(110deg,#2e7777,#28535d)!important;color:#eafff8!important;border:1px solid #72a4a3!important;border-radius:12px;font:800 15px system-ui;padding:10px;margin-top:10px}.quick-button small{display:block;font-weight:500;font-size:11px;margin-top:4px;opacity:.85}
.origin-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}.origin-picker button{min-height:66px;background:#101923;color:#bdcdd7;border:1px solid #3a4e5c;border-radius:10px;padding:8px 5px;font-size:12px}.origin-picker button.selected{border-color:#e5c177;color:#ffe4a7;background:#322b1b}.origin-picker small{display:block;font-size:10px;line-height:1.5;margin-top:4px}.run-narrative{padding:12px 14px;margin:10px 0;border-left:2px solid #cfad68;background:#1b2028;color:#c6d0d9;font-size:12px;line-height:1.65;border-radius:0 10px 10px 0}.run-narrative b{color:#efcf8e}.result-rank{font:900 50px Georgia;color:#eaca89;margin:14px 0}.milestone-pop{animation:rewardPop .4s ease-out}@keyframes rewardPop{0%{filter:brightness(1.7);transform:scale(.97)}100%{filter:brightness(1);transform:scale(1)}}

.quick-button{background:linear-gradient(100deg,#c86b85,#cf9378)!important;border-color:#ce8696!important;color:#fff!important}.daily-wish{margin-top:10px;padding:12px 14px;border:1px solid #e8c4b0;border-radius:14px;background:linear-gradient(100deg,#fff1da,#fff1ee);color:#89614c;font-size:12px;line-height:1.6}.daily-wish b{color:#a5596b}.diary-page{padding:20px;background:#fff6ea;border:1px solid #e6cdb3;border-radius:12px;margin:12px 0;color:#7c6556;line-height:1.9;font-size:14px}.diary-page h3{color:#a96778;margin-top:0}.result-rank{color:#c88391}.pet-wiggle,.scene-pet{transform-box:fill-box;transform-origin:50% 100%;animation:petBreathe 3s ease-in-out infinite}.scene-pet.second{animation-delay:-1.2s}.scene-pet.sleepy{filter:saturate(.8);animation-duration:4.5s}.scene-owner{filter:drop-shadow(0 8px 8px rgba(67,43,30,.16))}.scene-pet{filter:drop-shadow(0 8px 7px rgba(67,43,30,.2))}@keyframes petBreathe{50%{transform:translateY(-3px)}}
@media(min-width:850px){#dailyWish{grid-column:2;grid-row:2;margin:0}#phaseActions{grid-row:3/5}}