/* 재화·보상 등 재방문 동기 모듈 스타일 */
:root {
  --mx-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23ef6f7f' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --mx-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235a3d4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12l5-4v8z' fill='%235a3d4a'/%3E%3Cpath d='M7.5 12h11M11 8v8M14.5 8.5v7M18.5 12l3-3.5M18.5 12l3 3.5'/%3E%3C/g%3E%3C/svg%3E");
  --mx-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23d9527a'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Ccircle cx='5.5' cy='10' r='2.2'/%3E%3Ccircle cx='9.5' cy='6' r='2.3'/%3E%3Ccircle cx='14.5' cy='6' r='2.3'/%3E%3Ccircle cx='18.5' cy='10' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* 코인 */
.meta-coin-ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.pill.meta-coin { align-self: center; padding: 0 12px 0 8px; }
.pill.meta-coin b { font-weight: 800; }
.hero .corner .meta-coin { height: 38px; }
button.meta-coin:active { transform: translateY(2px); box-shadow: 0 1px 0 #ecd9d0; }
.pill.meta-gain { background: #fff1cf; color: #7a4a0c; padding: 0 14px 0 9px; font-size: 17px; }
.pill.meta-gain.zero { background: var(--card); color: var(--ink-soft); }
.anim-on .pill.meta-gain:not(.zero) { animation: meta-pop .5s .25s ease-out both; }
@keyframes meta-pop { from { transform: scale(.5); opacity: 0; } 65% { transform: scale(1.18); opacity: 1; } to { transform: none; } }
.meta-note { margin-top: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.meta-streakwin { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); color: var(--ink); text-align: left; font-weight: 600; }
.meta-streakwin img, .meta-streakwin svg { width: 26px; height: 26px; flex: none; }

/* 하단 탭: 상점 */
.tab svg.meta-shop-ic { stroke: none; }

/* 홈: 출석 달력 카드 */
.card.meta-calcard { padding: 10px 16px; }
.card.meta-calcard > svg.ic { width: 30px; height: 30px; margin: 0 8px; color: #e0708a; }
.card.meta-calcard b { font-size: 16px; }
.meta-chev svg.ic { width: 16px; height: 16px; color: var(--ink-soft); display: block; }

/* 데일리 달력 */
.meta-calhead { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.meta-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 12px 10px; }
.meta-cal em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-soft); padding-bottom: 2px; }
.meta-cal i { font-style: normal; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #fbf1ec; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta-cal i.blank { background: none; }
.meta-cal i.future { color: #cdbcbf; background: #fdf8f5; }
.meta-cal i.done { background: #ffe4ec; }
.meta-cal i.today { box-shadow: 0 0 0 2.5px var(--yellow-deep); }
.meta-cal i img, .meta-cal i svg { width: 74%; height: 74%; transform: rotate(-12deg); color: #e0708a; }
.anim-on .meta-cal i.today.done img, .anim-on .meta-cal i.today.done svg { animation: meta-stamp .45s .15s ease-out both; }
@keyframes meta-stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.meta-calstat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 10px; }
.meta-calstat div { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 9px 6px; }
.meta-calstat b { display: block; font: 400 24px/1.1 var(--display); }
.meta-calstat span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.meta-rw { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 8px 4px; text-align: left; font-size: 13px; font-weight: 700; }
.meta-rw .day { grid-row: span 2; min-width: 46px; text-align: center; padding: 6px 0; border-radius: 12px; background: var(--peach); color: #a14a2c; font: 400 16px var(--display); }
.meta-rw.got .day { background: var(--green); color: #2c7a55; }
.meta-rw .bar { height: 7px; border-radius: 99px; background: #f0e2db; overflow: hidden; }
.meta-rw .bar u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd785, #ffb14a); }
.sheet p.meta-fine { font-size: 12px; margin-top: 8px; }

/* 상점 */
.meta-shop { flex: 1; }
.meta-shop .topbar .side { width: 110px; }
.meta-shopnote { margin: 0 4px 6px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-align: center; }
.meta-h { margin: 16px 4px 8px; font: 400 18px var(--display); }
.meta-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.meta-item { background: var(--card); border: 3px solid transparent; border-radius: 22px; box-shadow: var(--shadow); padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.meta-item:active { transform: translateY(2px); }
.meta-item.on { border-color: var(--yellow); background: #fff8e6; }
.meta-item b { font: 400 16px var(--display); }
.meta-item .tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta-item .tag.on { background: var(--green); color: #2c7a55; }
.meta-item .tag.use { background: #f4ebe6; color: var(--ink); }
.meta-item .tag.price { background: #fff1cf; color: #7a4a0c; padding-left: 7px; }
.meta-item .tag.price.short { background: #f4ebe6; color: var(--ink-soft); }
.meta-item .tag.lock { background: var(--purple); color: #5b3f93; font-size: 12px; }
.meta-item .tag svg.ic { width: 14px; height: 14px; }
.meta-item .tag .meta-coin-ic { width: 17px; height: 17px; }
.meta-bigprev { display: flex; justify-content: center; margin-bottom: 6px; }
.meta-bigprev .meta-fp { width: 132px; }

/* 미리보기: 작은 보드 */
.meta-fp { display: block; width: 96px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 #ecd9d0, 0 3px 8px rgba(122, 78, 60, .12); }
.meta-mini { display: grid; grid-template-columns: repeat(4, 1fr); aspect-ratio: 1; border: 2px solid var(--wall); border-radius: 9px; overflow: hidden; gap: 1px; background: var(--wall); }
.meta-mini i { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.meta-xp { display: block; width: 70%; height: 70%; background: center/contain no-repeat; }
svg.meta-xp { width: 52%; height: 52%; stroke: rgba(75, 44, 63, .78); stroke-width: 3.4; fill: none; stroke-linecap: round; }
.meta-xp.x_brush { background-image: var(--mx-brush); }
.meta-xp.x_fish { background-image: var(--mx-fish); }
.meta-xp.x_paw { background-image: var(--mx-paw); }

/* 꾸미기 적용: X 표시 모양 (game.js가 그린 svg.x의 선을 숨기고 배경 그림으로 바꾼다) */
html:not([data-meta-x="x_default"])[data-meta-x] .cell .x { width: 62%; height: 62%; background-position: center; background-size: contain; background-repeat: no-repeat; }
html:not([data-meta-x="x_default"])[data-meta-x] .cell .x path { display: none; }
html[data-meta-x="x_brush"] .cell .x { background-image: var(--mx-brush); width: 48%; height: 48%; }
html[data-meta-x="x_fish"] .cell .x { background-image: var(--mx-fish); }
html[data-meta-x="x_paw"] .cell .x { background-image: var(--mx-paw); }

/* 꾸미기 적용: 보드 테두리 */
html[data-meta-frame="frame_wood"] .frame, .meta-fp.frame_wood {
  background: repeating-linear-gradient(92deg, rgba(120, 72, 38, .10) 0 3px, transparent 3px 11px), linear-gradient(135deg, #e0b384, #c58f5e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #a06d43, 0 8px 14px rgba(122, 78, 60, .18); }
html[data-meta-frame="frame_gingham"] .frame, .meta-fp.frame_gingham {
  background-color: #fff0f3;
  background-image: linear-gradient(90deg, rgba(255, 143, 163, .38) 50%, transparent 50%), linear-gradient(rgba(255, 143, 163, .38) 50%, transparent 50%);
  background-size: 14px 14px;
  box-shadow: 0 3px 0 #f3b9c6, 0 8px 14px rgba(122, 78, 60, .12); }
html[data-meta-frame="frame_gold"] .frame, .meta-fp.frame_gold {
  background: linear-gradient(135deg, #fff0b3, #ffc94a 45%, #ffe9a0 70%, #f5b63a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #dba02c, 0 8px 16px rgba(233, 169, 59, .3); }

/* 알림 */
.meta-toast { position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; padding: 10px 18px; border-radius: 999px;
  background: rgba(75, 44, 63, .92); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none; animation: meta-toast 1.8s ease both; }
@keyframes meta-toast { from { opacity: 0; transform: translate(-50%, 8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; } }

.meta-group { font: 400 20px var(--display); margin: 22px 0 2px; }