/* 사주킹 v2 — 밝은 단청 팔레트 · 모바일 앱 셸 (제안, 브랜드 미확정) */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@700;900&display=swap');

:root {
  --bg: #FFF6E3; --bg-2: #FFEBC2; --card: #FFFFFF; --line: #F0DDB4;
  --ink: #1D2140; --ink-2: #4E5275; --ink-3: #6A6E8E;
  --red: #C8321F; --red-d: #B02820; --red-bg: #FDE3DD;
  --teal: #12706A; --teal-bg: #D9F1EE;
  --yellow: #F7B731; --yellow-bg: #FFE7A8;
  --night: #1D2140; --night-2: #2A2F5C;
  --wood: #23804A; --fire: #C8321F; --earth: #EDA920; --metal: #A9B4C8; --water: #2F4FA8;
  --wood-ink: #1F7A44; --fire-ink: #B8301B; --earth-ink: #8A5C00; --metal-ink: #54607A; --water-ink: #26408F;
  --wood-bg: #DDF1E4; --fire-bg: #FDE3DD; --earth-bg: #FFEFC4; --metal-bg: #E6EAF2; --water-bg: #DFE6F8;
  --f-title: 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --f-body: 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --f-prose: 'Gowun Batang', 'Noto Serif KR', serif;
  --f-han: 'Noto Serif KR', 'Noto Serif CJK KR', serif;
  --r: 18px; --r-sm: 12px;
  --shell: 480px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --dancheong: repeating-linear-gradient(90deg, #C8321F 0 22px, #F7B731 22px 44px, #12706A 44px 66px, #FFF6E3 66px 88px, #2F4FA8 88px 110px);
}
*, *::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: #EBD9AE; 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: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 앱 셸: 모바일은 꽉 차게, 데스크톱은 가운데 480px + 단청 배경 */
body::before { content: ''; position: fixed; inset: 0; background:
  radial-gradient(circle at 20% 15%, rgba(200,50,31,.12), transparent 40%),
  radial-gradient(circle at 85% 80%, rgba(18,112,106,.14), transparent 45%); pointer-events: none; }
.shell { position: relative; max-width: var(--shell); min-height: 100dvh; margin-inline: auto; background: var(--bg); box-shadow: 0 0 0 1px rgba(29,33,64,.08), 0 30px 80px -20px rgba(29,33,64,.35); overflow-x: clip; }
.band { height: 10px; background: var(--dancheong); background-size: 110px 100%; }
.pad { padding-inline: 20px; }

.title { font-family: var(--f-title); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.eyebrow { font: 700 .8125rem/1 var(--f-body); letter-spacing: .08em; color: var(--red); }
.muted { color: var(--ink-2); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 900 1.0625rem/1 var(--f-body); text-decoration: none; box-shadow: 0 5px 0 var(--red-d); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--red-d); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--red-d); }
.btn.block { width: 100%; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.line:active { transform: none; background: rgba(29,33,64,.06); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; box-shadow: 0 3px 0 var(--red-d); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.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; }

/* 캐릭터 이미지 자리 (흰 배경 PNG는 multiply로 종이색에 녹임) */
.art { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.art::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, var(--yellow-bg), transparent 70%); }
.art img { position: relative; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.art .ph { position: absolute; inset: 20%; opacity: .85; }

/* 말풍선 */
.bubble { position: relative; display: inline-block; background: var(--card); border: 2.5px solid var(--ink); border-radius: 18px; padding: 10px 16px; font: 700 .9375rem/1.4 var(--f-body); box-shadow: 3px 3px 0 var(--ink); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; background: var(--card); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }

/* 카드 */
.card { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--ink); padding: 20px; }
.chip-el { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font: 700 .8125rem/1.5 var(--f-body); border: 1.5px solid currentColor; }
.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 3.2s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-8px); } }
}