/* 사주 멍멍(가칭) — 포근한 종이컷 스타일 · 모바일 앱 셸 (제안, 브랜드 미확정) */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@700;900&display=swap');
:root {
  --bg:#F6F3E8; --bg-2:#ECE6D2; --card:#FFFFFF; --ink:#1F3A33; --ink-2:#4A6159; --ink-3:#66786F;
  --orange:#C2410C; --orange-d:#9A3412; --orange-bg:#FFE3D1; --green:#2F7D5B; --green-d:#1F5C42; --green-bg:#D8EFE2;
  --sky:#BFE6F2; --butter:#FFE08A; --clay:#F2C9B0; --night:#1F3A33;
  --wood:#2F7D5B; --fire:#C2410C; --earth:#E9A93B; --metal:#9FB0C0; --water:#2F5FA8;
  --wood-bg:#D8EFE2; --fire-bg:#FFE3D1; --earth-bg:#FFEFC4; --metal-bg:#E6ECF2; --water-bg:#DCE7F8;
  --wood-ink:#1F6B49; --fire-ink:#A8360A; --earth-ink:#7A5200; --metal-ink:#4E6075; --water-ink:#244C8C;
  --f-title:'Jua','Noto Sans KR',sans-serif; --f-body:'Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;
  --f-prose:'Gowun Dodum','Noto Sans KR',sans-serif; --f-han:'Noto Serif KR',serif;
  --r:26px; --r-sm:16px; --shell:480px; --ease:cubic-bezier(.2,.8,.2,1);
  --dots: radial-gradient(circle at 10px 6px, #F2C9B0 0 5px, transparent 5.5px), radial-gradient(circle at 30px 6px, #BFE6F2 0 5px, transparent 5.5px), radial-gradient(circle at 50px 6px, #FFE08A 0 5px, transparent 5.5px), radial-gradient(circle at 70px 6px, #D8EFE2 0 5px, transparent 5.5px);
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 1rem/1.7 var(--f-body); color:var(--ink); background:#DCD6BE; word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3,p { margin:0; } button { font:inherit; color:inherit; cursor:pointer; } a { color:inherit; }
img,svg { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden] { display:none !important; }
.shell { position:relative; max-width:var(--shell); min-height:100dvh; margin-inline:auto; background:var(--bg); box-shadow:0 0 0 1px rgba(31,58,51,.08), 0 30px 80px -20px rgba(31,58,51,.35); overflow-x:clip; }
.band { height:14px; background:var(--dots) 0 0/80px 14px repeat-x; background-color:var(--bg); }
.title { font-family:var(--f-title); font-weight:400; line-height:1.25; letter-spacing:0; text-wrap:balance; }
.eyebrow { font:700 .8125rem/1 var(--f-body); letter-spacing:.06em; color:var(--green-d); }
.muted { color:var(--ink-2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:58px; padding:0 30px; border:0; border-radius:999px; background:var(--orange); color:#fff; font:900 1.0625rem/1 var(--f-body); text-decoration:none; box-shadow:0 6px 0 var(--orange-d); transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.btn:hover { transform:translateY(-1px); box-shadow:0 7px 0 var(--orange-d); }
.btn:active { transform:translateY(5px); box-shadow:0 1px 0 var(--orange-d); }
.btn.block { width:100%; } .btn.sm { min-height:44px; padding:0 20px; font-size:.9375rem; box-shadow:0 4px 0 var(--orange-d); }
.btn.soft { background:var(--card); color:var(--ink); box-shadow:0 6px 0 var(--bg-2), inset 0 0 0 2px var(--bg-2); }
.link { background:none; border:0; padding:12px 8px; min-height:44px; font-weight:700; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; }
.ic { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.art { position:relative; display:grid; place-items:center; aspect-ratio:1; }
.art::before { content:''; position:absolute; inset:8%; border-radius:50%; background:var(--tint,var(--butter)); }
.art img { position:relative; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.art .ph { position:absolute; inset:22%; }
.card { background:var(--card); border-radius:var(--r); box-shadow:0 6px 0 var(--bg-2); padding:20px; }
.chip-el { display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font:700 .8125rem/1.5 var(--f-body); }
.chip-el.wood { background:var(--wood-bg); color:var(--wood-ink); } .chip-el.fire { background:var(--fire-bg); color:var(--fire-ink); }
.chip-el.earth { background:var(--earth-bg); color:var(--earth-ink); } .chip-el.metal { background:var(--metal-bg); color:var(--metal-ink); } .chip-el.water { background:var(--water-bg); color:var(--water-ink); }
@media (prefers-reduced-motion:no-preference) {
  .rise { animation:rise .6s var(--ease) both; } .rise.d1 { animation-delay:.08s; } .rise.d2 { animation-delay:.16s; } .rise.d3 { animation-delay:.24s; }
  @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .bob { animation:bob 3s ease-in-out infinite; } @keyframes bob { 50% { transform:translateY(-8px) rotate(-2deg); } }
}

.art svg.dog { position:relative; width:100%; height:100%; }
.art.bob svg.dog { overflow:visible; }