/* 디자인 토큰(ds/specs/battle-ui-style.md 2장·4장). 배틀 UI가 쓰고, 돌보기 화면은 공유만 한다(모양 변경 없음). */
:root{--ui-cream:#fff8e6;--ui-panel:#fffdf5;--ui-panel-hud:#fffaf0;--ui-panel-sunk:#f6eed8;--ui-line:#e6d6b0;--ui-line-strong:#c9a86e;--ui-rim:#ffffff;--ui-step-color:#d9c49a;
  --ui-ink-strong:#3a2618;--ui-ink:#4a3526;--ui-ink-soft:#735a40;--ui-ink-off:#7d725f;
  --ui-leaf:#9fd67f;--ui-leaf-step:#86bf67;--ui-leaf-deep:#2f6b2c;--ui-leaf-tint:#eef9e2;--ui-sky:#8fd3f0;--ui-sky-step:#72b8d6;--ui-sky-deep:#1f5f7a;--ui-sky-tint:#e6f5fb;
  --ui-sun:#ffd35a;--ui-sun-step:#d9a520;--ui-sun-deep:#7a4d00;--ui-sun-tint:#fff4d1;--ui-berry:#c7b0f4;--ui-berry-step:#a48bdc;--ui-berry-deep:#5b3fa6;--ui-berry-tint:#f3edff;
  --ui-mine:#3f7d38;--ui-mine-edge:#7cc46a;--ui-mine-step:#a9d493;--ui-mine-tint:#e6f6da;--ui-foe:#6f4fc4;--ui-foe-edge:#b59af0;--ui-foe-step:#cdbcf0;--ui-foe-tint:#f1eaff;
  --ui-hp-high:#5cc46a;--ui-hp-mid:#f2c53d;--ui-hp-low:#f3964a;--ui-star:#f5b82e;--ui-star-hi:#fff1a8;--ui-star-deep:#8a5a00;
  --ui-warn:#f08a3c;--ui-warn-step:#f3c29a;--ui-warn-deep:#9a4412;--ui-warn-tint:#fff0e0;--ui-off:#efe9dc;--ui-off-line:#ddd3bf;
  --ui-wood:#b98552;--ui-wood-grain:#c99862;--ui-wood-deep:#8a5a30;--ui-paper:#fff8e6;--ui-paper-line:#f1e4c2;--ui-stage-dim:#0c1826a6;
  --mind-courage:#ed9857;--mind-trust:#ee9db9;--mind-curious:#51bdb4;--mind-calm:#9ccfe9;--mind-joy:#e9c75f;
  --ui-r-panel:22px;--ui-r-card:16px;--ui-r-pill:999px;--ui-bw:3px;--ui-bw-thin:2px;--ui-step:4px;--ui-step-press:2px;--ui-step-hover:6px;--ui-soft:0 8px 18px #3a26181f;--ui-soft-stage:0 6px 16px #00000066;
  --ui-font:ui-rounded,"Apple SD Gothic Neo","NanumSquareRound","Noto Sans KR",system-ui,sans-serif;
  --ui-s1:4px;--ui-s2:8px;--ui-s3:12px;--ui-s4:16px;--ui-s5:24px;--ui-s6:32px;
  --ui-ease-out:cubic-bezier(.22,.8,.3,1);--ui-ease-bar:cubic-bezier(.16,1,.3,1);--ui-t-press:80ms;--ui-t-release:120ms;--ui-t-pop:220ms;--ui-t-stamp:300ms}
:root{font-family:ui-rounded,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;color:#234335;background:#eef4e5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 8% 4%,#fdf7d8 0,transparent 24%),radial-gradient(circle at 92% 11%,#d7eee7 0,transparent 28%),#eef4e5}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #4d9e74;outline-offset:3px}.app-shell{max-width:1460px;margin:0 auto;padding:0 34px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d4dfca}.brand{display:flex;align-items:center;gap:12px;font-size:21px;line-height:1.05;font-weight:950;letter-spacing:-.07em}.brand small{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:#718778;margin-top:5px}.brand-mark{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:#2f8358;color:#f7d86d;font-size:26px;box-shadow:0 4px 0 #205f41}.topbar-right{display:flex;gap:10px;align-items:center}.day-pill,.icon-button{background:#fffdf4;border:1px solid #d8e4cd;box-shadow:0 2px 0 #d4dfcb;color:#2c5d45}.day-pill{padding:8px 15px;border-radius:999px;font-weight:850;font-size:13px}.icon-button{width:37px;height:37px;border-radius:50%;font-size:22px}.dashboard{padding:35px 0 45px}.intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:27px}.eyebrow{color:#559a70;font-size:10px;font-weight:950;letter-spacing:.18em;margin:0 0 9px}.intro h1{font-size:clamp(29px,3.2vw,45px);line-height:1.23;letter-spacing:-.075em;margin:0;font-weight:950}.intro h1 em{font-style:normal;color:#3b9e65}.intro>p{max-width:360px;margin:0 0 4px;color:#718577;font-size:14px;line-height:1.65;font-weight:650}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px}.main-column{min-width:0}.pet-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:13px}.pet-tab{min-height:68px;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #dce7d4;background:#fffef7;border-radius:16px;padding:9px 13px;color:#2d4938;box-shadow:0 3px 0 #dde8d4;transition:transform .2s,border-color .2s,box-shadow .2s}.pet-tab:hover{transform:translateY(-2px)}.pet-tab.active{border:2px solid #58a56d;box-shadow:0 4px 0 #b4d6a9;background:#f8fff3}.pet-avatar{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;overflow:hidden;background:#e4f3c9}.pet-avatar img{width:56px;height:56px;object-fit:contain}.pet-tab:nth-child(2) .pet-avatar{background:#d6f0eb}.pet-tab:nth-child(3) .pet-avatar{background:#eaddf8}.pet-tab strong{display:block;font-size:15px;letter-spacing:-.06em;white-space:nowrap}.pet-tab small{display:block;margin-top:3px;font-size:11px;color:#809187;font-weight:700}.stage{--sky:#d9f5d5;position:relative;min-height:455px;overflow:hidden;border:1px solid #b5d9b7;border-radius:23px;background:radial-gradient(circle at 22% 22%,#fff9d8 0 1.5%,transparent 1.7%),radial-gradient(circle at 75% 18%,#fff 0 1%,transparent 1.2%),radial-gradient(circle at 89% 44%,#fff8cf 0 .7%,transparent 1%),linear-gradient(135deg,#f7f4d0,var(--sky) 53%,#b4e5d7);box-shadow:0 8px 0 #dce8d7,inset 0 0 0 7px #ffffff5c;transition:background .3s}.stage[data-pet="gecko"]{--sky:#b7e6e3;background:radial-gradient(circle at 80% 16%,#fff5d2 0 2.3%,transparent 2.5%),linear-gradient(150deg,#e6f8ea,var(--sky) 65%,#b1dfe2)}.stage[data-pet="cloud"]{--sky:#d7d2fa;background:radial-gradient(circle at 77% 20%,#fff 0 1%,transparent 1.2%),radial-gradient(circle at 17% 40%,#fff 0 1.2%,transparent 1.4%),linear-gradient(140deg,#defaf2,var(--sky) 70%,#b9d4f3)}.stage:before,.stage:after{content:"✦";position:absolute;color:#fffce5;text-shadow:0 0 14px #fff;z-index:1}.stage:before{left:10%;top:28%;font-size:28px}.stage:after{right:12%;top:37%;font-size:22px}.stage-top{position:relative;z-index:4;display:flex;justify-content:space-between;padding:22px 24px}.stage-chip{border:1px solid #ffffffad;background:#ffffffbc;color:#468264;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;backdrop-filter:blur(7px)}.level-chip{color:#476b52}.stage-art{position:absolute;z-index:2;inset:6px 0 62px;display:grid;place-items:center}.stage-art svg{width:min(81%,450px);height:100%;max-height:390px;overflow:visible;filter:drop-shadow(0 17px 12px #4271572c)}.loading-art{color:#599572;font-weight:800}.stage-floor{position:absolute;left:20%;right:20%;bottom:75px;height:45px;border-radius:50%;background:#2f87654b;filter:blur(14px)}.stage-bottom{position:absolute;z-index:5;left:23px;right:23px;bottom:20px;display:flex;align-items:end;justify-content:space-between}.pet-title{font-size:11px;font-weight:900;color:#468666;margin:0 0 3px}.stage-bottom h2{font-size:27px;font-weight:950;letter-spacing:-.075em;margin:0;line-height:1.1}.pet-personality{font-size:12px;font-weight:750;color:#5b806b;margin:5px 0 0}.mood-bubble{align-self:end;background:#fffdf3;border:1px solid #dceacf;border-radius:12px 12px 12px 3px;padding:9px 12px;color:#517457;font-size:12px;font-weight:900;box-shadow:0 3px 0 #d3e6ce}.speech-bubble{position:absolute;z-index:8;right:10%;top:18%;max-width:180px;min-width:80px;background:#fffefa;color:#35584c;border:2px solid #8abc8e;border-radius:18px 18px 3px 18px;padding:11px 14px;font-size:13px;font-weight:900;line-height:1.45;box-shadow:0 8px 20px #42715725;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.speech-bubble.show{opacity:1;transform:translateY(0)}.actions-panel,.panel,.card-lore{background:#fffef8;border:1px solid #e0e8d9;border-radius:20px;box-shadow:0 4px 0 #dfe9d9}.actions-panel{margin-top:17px;padding:21px 22px 15px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px}.section-head h3{font-size:19px;letter-spacing:-.065em;line-height:1;margin:0}.hint{font-size:11px;font-weight:700;color:#a0aa9d}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0 11px}.action-button{position:relative;min-height:66px;border:1px solid #dcebd8;border-radius:14px;background:#f7fbef;color:#2d6348;text-align:left;padding:10px 12px;box-shadow:0 3px 0 #d9e5d2;transition:transform .18s,background .18s}.action-button:hover{transform:translateY(-2px);background:#edfae8}.action-button:active{transform:translateY(2px);box-shadow:none}.action-button:disabled{cursor:not-allowed;opacity:.5}.action-button[data-action="feed"]{background:#fff8e8;border-color:#f0e4c9;color:#95652f}.action-button[data-action="sleep"]{background:#f2f1fc;border-color:#e5def6;color:#7464a3}.action-button[data-action="run"],.action-button[data-action="jump"]{background:#f0f9f7;border-color:#d3eae4;color:#3b857d}.action-icon{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#ffffffb0;font-size:18px;vertical-align:middle;margin-right:5px}.action-button strong{font-size:14px;letter-spacing:-.04em}.action-button small{display:block;color:#92a18f;font-size:10px;font-weight:750;padding-left:33px;margin-top:2px}.action-feedback{min-height:19px;margin:0;color:#708771;font-size:12px;font-weight:750}.sidebar{display:flex;flex-direction:column;gap:14px}.panel{padding:22px 21px}.little-sparkle{font-size:23px;color:#e1be55}.meters{display:grid;gap:17px;margin:25px 0 21px}.meter-heading,.xp-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:900;margin-bottom:7px}.meter-heading b{color:#657a69}.meter-label{display:flex;align-items:center;gap:8px}.meter-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f0f6e8;font-size:14px}.meter-track{height:10px;background:#e8efe4;border-radius:999px;overflow:hidden}.meter-track span{display:block;height:100%;width:0;border-radius:inherit;background:#66b57e;transition:width .35s}.meter-track.hunger span{background:#f4bc6b}.meter-track.energy span{background:#6bbed4}.meter-track.bond span{background:#d78cbd}.xp-block{border-top:1px dashed #dfe7d9;padding-top:17px}.xp-heading{color:#6a8271}.xp-track{height:7px}.xp-track span{background:#f1ca65}.quest-count,.leaf-total{font-size:12px;font-weight:950;color:#4a9a62;background:#edf7e8;padding:7px 10px;border-radius:999px}.quests{list-style:none;padding:0;margin:20px 0 15px;display:grid;gap:13px}.quests li{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:800;color:#657b6a}.quest-check{flex:none;width:22px;height:22px;border:2px solid #cbdcc8;border-radius:7px;display:grid;place-items:center;color:white;font-size:14px}.quests li.done{color:#3e9462}.quests li.done .quest-check{background:#5cb77a;border-color:#5cb77a}.quest-note{font-size:11px;line-height:1.5;color:#98a695;margin:0}.team-panel{background:#f5fae9;border-color:#d5e5bd}.team-panel>p{font-size:12px;line-height:1.6;color:#6c856b;font-weight:700;margin:16px 0}.team-progress{display:flex;gap:6px;margin-bottom:16px}.team-dot{flex:1;padding:8px 2px;border-radius:10px;background:#e6efd8;color:#86a085;text-align:center;font-size:11px;font-weight:850}.team-dot.ready{color:#42885d;background:#d7efce}.team-button{width:100%;border:0;border-radius:12px;background:#308c61;color:white;padding:13px 15px;font-size:13px;font-weight:900;text-align:left;box-shadow:0 4px 0 #207046}.team-button span{float:right;font-size:16px}.team-button:disabled{background:#a9c6ad;box-shadow:0 4px 0 #94b599;cursor:not-allowed}.card-lore{margin-top:25px;padding:24px}.lore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px}.lore-card{display:flex;gap:12px;padding:13px;border:1px solid #e3eadb;background:#fbfcf3;border-radius:15px}.lore-card .lore-avatar{flex:none;width:70px;height:70px;border-radius:14px;background:#e5f3d9;display:grid;place-items:center}.lore-card:nth-child(2) .lore-avatar{background:#dcefeb}.lore-card:nth-child(3) .lore-avatar{background:#ece4f8}.lore-avatar img{width:80px;height:80px;object-fit:contain}.lore-card h4{font-size:14px;margin:2px 0 4px;letter-spacing:-.06em}.lore-card p{font-size:11px;line-height:1.5;color:#849587;margin:0;font-weight:650}.lore-card .lore-stat{color:#5d9970;font-weight:850;margin-top:5px}footer{text-align:center;padding:10px 0 34px;color:#9cab9a;font-size:11px;font-weight:750}@media(max-width:980px){.app-shell{padding:0 22px}.game-layout{grid-template-columns:minmax(0,1fr) 300px}.pet-tab{padding:8px}.pet-tab strong{font-size:13px}.pet-avatar{width:40px;height:40px}.pet-avatar img{width:49px;height:49px}.lore-grid{grid-template-columns:1fr 1fr}.intro>p{max-width:280px}}@media(max-width:760px){.app-shell{padding:0 15px}.topbar{height:71px}.dashboard{padding-top:24px}.intro{display:block}.intro>p{margin:15px 0 0;max-width:100%}.game-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.care-panel{grid-row:span 2}.stage{min-height:420px}.stage-art svg{width:min(92%,420px)}.lore-grid{grid-template-columns:1fr 1fr}.hint{display:none}}@media(max-width:540px){.brand{font-size:18px}.brand-mark{width:32px;height:32px}.intro h1{font-size:30px}.pet-picker{gap:6px}.pet-tab{min-height:68px;display:grid;justify-items:center;text-align:center;padding:6px 2px;gap:2px}.pet-avatar{width:35px;height:35px}.pet-avatar img{width:44px;height:44px}.pet-tab strong{font-size:11px}.pet-tab small{display:none}.stage{min-height:390px}.stage-art{inset:3px 0 70px}.stage-art svg{width:min(98%,360px)}.stage-top{padding:16px}.stage-bottom{left:16px;right:16px;bottom:17px}.stage-bottom h2{font-size:23px}.pet-personality{font-size:11px}.mood-bubble{font-size:10px;padding:8px}.actions-panel,.panel,.card-lore{padding:17px}.actions{gap:6px}.action-button{min-height:59px;padding:7px}.action-icon{width:22px;height:22px;margin-right:2px;font-size:15px}.action-button strong{font-size:12px}.action-button small{font-size:9px;padding-left:0}.sidebar{display:flex}.lore-grid{grid-template-columns:1fr}}

/* Card-faithful illustrated mantis: one master plus six authored poses. */
.stage[data-pet="leaf"]{min-height:565px;background:radial-gradient(ellipse at 50% 45%,#f8ffcf 0%,#e8f6c0 25%,#c9e5b0 57%,#8dba9c 100%);border-color:#9cb982}
.stage[data-pet="leaf"] .stage-art{inset:40px 0 78px}
.stage[data-pet="leaf"] .stage-floor{bottom:79px;left:28%;right:28%;height:25px;background:#3f693d55;filter:blur(12px)}
.raster-pet{width:min(92%,450px);aspect-ratio:1;max-height:100%;background-image:url('assets/saninja-king-master.png');background-size:100% 100%;background-repeat:no-repeat;transform-origin:50% 85%;filter:drop-shadow(0 13px 9px #224f3526);animation:mantis-idle 4s ease-in-out infinite;will-change:transform}
.raster-pet:is(.pose-play,.pose-eat,.pose-train,.pose-run,.pose-jump,.pose-sleep){background-image:url('assets/saninja-king-poses.png');background-size:300% 200%}
.raster-pet.pose-play{background-position:0% 0%;animation:mantis-play .65s ease-in-out infinite alternate}
.raster-pet.pose-eat{background-position:50% 0%;animation:mantis-eat .55s ease-in-out infinite alternate}
.raster-pet.pose-train{background-position:100% 0%;animation:mantis-train 1.1s ease-in-out infinite alternate}
.raster-pet.pose-run{background-position:0% 100%;animation:mantis-run .36s ease-in-out infinite alternate}
.raster-pet.pose-jump{background-position:50% 100%;animation:mantis-jump 1.25s ease-in-out infinite}
.raster-pet.pose-sleep{background-position:100% 100%;animation:mantis-sleep 3s ease-in-out infinite}
@keyframes mantis-idle{50%{transform:translateY(-5px) rotate(.5deg)}}
@keyframes mantis-play{to{transform:translateY(-10px) rotate(-4deg)}}
@keyframes mantis-eat{to{transform:translateY(2px) scale(1.008,.995)}}
@keyframes mantis-train{to{transform:rotate(2deg) translateY(-4px)}}
@keyframes mantis-run{from{transform:translateX(-15px) rotate(-2deg)}to{transform:translate(15px,-7px) rotate(2deg)}}
@keyframes mantis-jump{0%,100%{transform:translateY(0)}25%{transform:translateY(7px) scale(1.03,.97)}60%{transform:translateY(-34px) scale(.98,1.02)}}
@keyframes mantis-sleep{50%{transform:scale(1.012,.99)}}
@media(max-width:540px){.stage[data-pet="leaf"]{min-height:440px}.stage[data-pet="leaf"] .stage-art{inset:48px 0 77px}.raster-pet{width:min(94%,335px)}.stage[data-pet="leaf"] .speech-bubble{top:13%;right:5%;max-width:150px}.stage[data-pet="leaf"] .stage-floor{bottom:80px}}
@media(prefers-reduced-motion:reduce){.raster-pet{animation:none!important}}
@media(max-width:540px){.dex-link-text{display:none}}
/* Keep adjacent atlas-cell edge fragments out of each character viewport. */
.raster-pet.pose-eat{clip-path:inset(0 12% 0 15%)}
.raster-pet.pose-train{clip-path:inset(0 10% 0 10%)}
.raster-pet.pose-run{clip-path:inset(3% 2% 0 0)}
.raster-pet.pose-jump{clip-path:inset(0 2% 0 10%)}
.raster-pet.pose-sleep{clip-path:inset(25% 0 0 0)}
.raster-pet.pose-jump{clip-path:polygon(10% 1.5%,51% 1.5%,51% 0,68% 0,68% 1.5%,98% 1.5%,98% 100%,10% 100%)}

/* 본편과 제작 도구의 진입 구분 */
.mode-support,.care-catalog-status{font-size:13px;line-height:1.7;color:#415d4b;margin:12px 0 18px}.mode-support span{display:block}.developer-tools{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;margin-top:16px}.developer-tools a{display:inline-flex;align-items:center;min-height:44px;color:#285b43;font-weight:700;text-underline-offset:4px}.developer-tools small{flex-basis:100%}.developer-tools a:focus-visible,.dex-link:focus-visible{outline:3px solid #285b43;outline-offset:4px}
/* 모토마뱀은 승인 원화를 사용. 기존 돌보기 행동의 이동/기울임만 적용한다. */
.raster-pet.pet-gecko,.raster-pet.pet-gecko:is(.pose-play,.pose-eat,.pose-train,.pose-run,.pose-jump,.pose-sleep){background-image:var(--care-art);background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
@media(max-width:540px){.topbar{gap:10px;flex-wrap:wrap}.topbar-right{margin-left:auto}.mode-support,.care-catalog-status{font-size:12px}.stage[data-pet="gecko"] .stage-art{inset:48px 0 115px}.raster-pet.pet-gecko{width:min(84%,240px)}}