/* =====================================================================
   옹기 선반 소꿉놀이 (POT-SHELF) — 비주얼 리부트 2026-09-26
   근거: assets/specs/visual-reboot-2026-09-26/01-visual-direction.md
   규칙: 평면 3톤 · 블러 없는 단단한 그림자 · 외곽선 없음 · transform/opacity 모션만
   구조(레이아웃)는 css/base.css(자동 생성), 이 파일은 "보이는 모든 것"을 백지에서 칠한다.
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
  --bg: #F7EDDC; --surface: #FFF9F0; --surface-2: #F0E3CF; --surface-3: #E6D5BD;
  --ink: #3A2B34; --ink-soft: #76626C; --ink-mute: #9A8A90;
  --accent-1: #C24B32; --accent-1-hi: #E0703F; --accent-1-shade: #6E2F3A;
  --accent-2: #2F6F7E; --accent-2-hi: #4C8E9B; --accent-2-shade: #1F4556;
  --success: #3A7A3C; --success-shade: #24502A; --warning: #EDA23A;
  --danger: #A83A58; --danger-hi: #C45A75; --danger-shade: #5E2440;
  --gold: #F3C24A; --gold-hi: #FBE4A0; --gold-shade: #9A6A1E; --gold-ink: #7A4E0A;
  --card-face: #FFFBF3; --card-edge: #D9CED6; --card-dim: #EFE6DA;
  --suit-red: #C8323E; --suit-black: #262030; --suit-green: #2E7A4A; --suit-blue: #2C5DB0;
  --table: #3C6A63; --table-weave: #43726A; --table-thread: #6E9C92; --table-slot: #335D57; --table-hud: #35605A;
  --knot: #EAD9B8; --shadow-light: #CDBFCB; --shadow-table: #23403F;
  --chip: #223246; --chip-shade: #10182A; --chip-ink: #FFF9F0;
  --wood: #B98A5E; --wood-hi: #D8AE7E; --wood-shade: #6B4F52; --wood-slot: #8E6A4C;
  --scrim: rgba(28, 36, 51, .55); --hint: #FFD35C;
  --r-btn: 12px; --r-panel: 16px; --r-sheet: 20px;
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45); --ease-waddle: cubic-bezier(.34, 1.56, .64, 1); --ease-pop: cubic-bezier(.3, 1.3, .6, 1);
  --f-title: "PS Fredoka", "PS Jua", "Nunito", "M PLUS Rounded 1c", "Noto Sans CJK SC", system-ui, sans-serif;
  --f-body: "PS Pretendard", "Noto Sans Arabic", "Noto Sans CJK JP", system-ui, -apple-system, sans-serif;
  --f-num: "PS Pretendard", system-ui, sans-serif;
  --ratio: 1 / 1.42;
  --gap: 2px;
  color-scheme: light;
}
/* 저녁 톤(설정 또는 기기 다크) — 카드 면은 어둡게 하지 않는다 */
html[data-tone="dusk"] {
  --bg: #1C2433; --surface: #26314A; --surface-2: #2F3B57; --surface-3: #3A4766;
  --ink: #F7EDDC; --ink-soft: #A99CB0; --ink-mute: #7E7690;
  --accent-1: #D2573A; --accent-2: #6FB3BF; --accent-2-shade: #3C6E78;
  --table: #2F4E6E; --table-weave: #35557A; --table-thread: #5C7FA3; --table-slot: #27425E; --table-hud: #2A4665;
  --shadow-light: #10182A; --shadow-table: #1A2C44; --hint: #FFE9A8;
  color-scheme: dark;
}

/* ---------- 2. 폰트(OFL, 로컬 번들) ---------- */
@font-face { font-family: "PS Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC; }
@font-face { font-family: "PS Jua"; src: url("../jua.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PS Pretendard"; src: url("../fonts/pretendard.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- 3. 바탕·글자 ---------- */
html, body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: 500; -webkit-tap-highlight-color: transparent; }
/* JS(setupSky)의 인라인 하늘 그라디언트보다 스킨이 우선 — 화면별 바탕은 아래 모드 규칙이 결정 */
html[data-skin] body { background: var(--table) !important; }
html[data-skin] body.home-active { background: var(--sky-4) !important; }
button, select, input { font-family: inherit; color: inherit; }
button { background: none; border: 0; }
h1, h2, h3, .dialog h1 { font-family: var(--f-title); font-weight: 600; color: var(--ink); letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
img { image-rendering: pixelated; }

/* ---------- 4. 공통 컴포넌트 ---------- */
/* 오버레이 막 + 패널 */
.overlay { background: var(--scrim); }
.overlay.show > .dialog { animation: psPanelIn 260ms var(--ease-pop) both; }
.dialog {
  background: var(--surface); color: var(--ink); border-radius: var(--r-panel);
  box-shadow: 0 6px 0 var(--shadow-light); padding: 20px 16px 16px;
  width: min(calc(100vw - 32px), 360px);
}
.dialog h1 {
  display: block; padding: 0 0 12px; margin: 0 0 12px; font-size: 24px; line-height: 1.15; text-align: center;
  background: radial-gradient(circle, var(--surface-3) 1.1px, transparent 1.6px) bottom / 7px 3px repeat-x;
}
.dialog h1 img, .dialog h1 .ps-ico { vertical-align: -4px; }
.dialog .sub, .dialog p { color: var(--ink-soft); font-size: 15px; line-height: 1.45; opacity: 1; }

/* 버튼: 주요(.diff.again/.win-primary), 보조(.diff.ghost), 기본(.diff) */
.diff {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 20px; margin: 12px 0 0; border-radius: var(--r-btn);
  font-family: var(--f-title); font-weight: 600; font-size: clamp(16px, 4.8vw, 20px); line-height: 1.15;
  background: var(--surface-2); color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow-light);
  transition: transform 160ms var(--ease-waddle), box-shadow 0s;
  animation: none !important;
}
.diff:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow-light); transition: transform 70ms var(--ease-out-soft); }
.diff.again, .diff.win-primary, #howNext, .diff.double, .diff.gift, .diff.prize {
  background: var(--accent-1); color: var(--surface);
  box-shadow: inset 0 3px 0 var(--accent-1-hi), 0 4px 0 var(--accent-1-shade);
}
.diff.again:active, .diff.win-primary:active, #howNext:active, .diff.double:active, .diff.gift:active, .diff.prize:active {
  box-shadow: inset 0 3px 0 var(--accent-1-hi), 0 1px 0 var(--accent-1-shade);
}
/* 광고·선물 계열은 쪽빛(보상 선택지 — 주요 행동과 구분) */
.diff.double, .diff.gift, .diff.prize { background: var(--accent-2); box-shadow: inset 0 3px 0 var(--accent-2-hi), 0 4px 0 var(--accent-2-shade); }
.diff.double:active, .diff.gift:active, .diff.prize:active { box-shadow: inset 0 3px 0 var(--accent-2-hi), 0 1px 0 var(--accent-2-shade); }
.diff.ghost { background: var(--surface-2); color: var(--ink); min-height: 48px; font-size: clamp(15px, 4.4vw, 18px); }
.diff:disabled, .diff[disabled] { background: var(--surface-3) !important; color: var(--ink-mute) !important; box-shadow: none !important; }
#restartYes { background: var(--danger); box-shadow: inset 0 3px 0 var(--danger-hi), 0 4px 0 var(--danger-shade); color: #fff; }

/* 아이콘 버튼(원형 닫기/뒤로/설정) */
.icon-btn, .gacha-back, .how-close, .win-close-x, .gs-close, .rs-round-btn, .rate-close {
  border-radius: 999px; background: var(--surface-2); color: var(--ink);
  box-shadow: 0 2px 0 var(--shadow-light); font-family: var(--f-title); font-size: 18px;
}
.icon-btn:active, .gacha-back:active, .how-close:active, .win-close-x:active, .gs-close:active { transform: translateY(2px); box-shadow: none; }
.icon-btn img, .icon-btn .ps-ico { width: 24px; height: 24px; }

/* 재화 칩 */
.combo-stat, .rs-coin { min-width: 64px; padding: 0 12px 0 6px !important;
  flex-direction: row; gap: 6px; height: 32px; padding: 0 12px 0 4px; border-radius: 16px;
  background: var(--chip); color: var(--chip-ink); box-shadow: 0 2px 0 var(--chip-shade);
  font-family: var(--f-num); font-weight: 800; font-variant-numeric: tabular-nums;
}
.combo-stat .label { opacity: 1; font-size: 0; display: inline-flex; }
.combo-stat .label img, .combo-stat .label .ps-ico, #missionsCoinIco img, #missionsCoinIco .ps-ico { width: 22px; height: 22px; margin-left: -4px; }
.combo-stat span:last-child, .combo-stat #combo, .combo-stat #homePoints { font-size: 15px; color: var(--chip-ink); text-shadow: none; }
.combo-stat.ps-bump { animation: psChipBump 220ms var(--ease-waddle); }

/* 알림 점·배지 */
.nav-badge-dot { background: var(--accent-1); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); }
.act .badge, .badge { background: var(--accent-1); color: var(--surface); border-radius: 9px; font-family: var(--f-num); font-weight: 800; }

/* 세그먼트 */
.seg { background: var(--surface-3); border-radius: 22px; padding: 3px; display: flex; gap: 0; }
.seg-btn { flex: 1; min-height: 40px; border-radius: 19px; color: var(--ink-soft); font-weight: 700; font-size: 15px; transition: transform 180ms var(--ease-waddle); }
.seg-btn.on, .seg-btn.active, .seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 var(--shadow-light); }

/* 슬라이더 */
.vol-slider { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; }
.vol-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2) var(--fill, 50%), var(--surface-3) var(--fill, 50%)); }
.vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 0 var(--shadow-light), inset 0 0 0 8px var(--surface), inset 0 0 0 13px var(--accent-2); }
.lang-select { width: 100%; min-height: 52px; border-radius: var(--r-btn); background: var(--surface-2); color: var(--ink); border: 0; padding: 0 16px; font-size: 17px; font-weight: 700; box-shadow: 0 4px 0 var(--shadow-light); }

/* 진행 바(미션 등) */
.m-track { background: var(--surface-3); border-radius: 6px; height: 12px; overflow: hidden; }
.m-fill { background: var(--accent-2); border-radius: 6px; height: 100%; }

/* ---------- 5. 게임 화면: 상단 HUD ---------- */
#topbar { background: var(--table-hud); color: var(--chip-ink); min-height: 48px; }
#topbar .icon-btn { background: var(--surface); box-shadow: 0 3px 0 var(--shadow-table); color: var(--ink); width: 40px; height: 40px; }
#topbar .stats { gap: 6px; justify-content: center; }
#topbar .stats .stat {
  flex-direction: row; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px;
  background: var(--chip); box-shadow: 0 2px 0 #1A2C35; color: var(--chip-ink);
}
#topbar .stats .stat .label { font-size: 11px; font-weight: 700; opacity: .72; letter-spacing: 0; }
#topbar .stats .stat span:last-child { font-family: var(--f-num); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------- 6. 테이블(이끼 쪽빛 삼베 + 거미 날실) ---------- */
#board {
  gap: var(--gap); padding: 18px 6px 0;
  background:
    repeating-linear-gradient(0deg, rgba(67, 114, 106, .5) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(67, 114, 106, .5) 0 1px, transparent 1px 4px),
    var(--table);
}
html[data-tone="dusk"] #board { background: repeating-linear-gradient(0deg, rgba(53, 85, 122, .5) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(53, 85, 122, .5) 0 1px, transparent 1px 4px), var(--table); }
/* 가로 실 레일 */
#board::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--table-thread); opacity: .6; pointer-events: none; }
/* 열마다 매듭 + 세로 날실(카드 뒤로 숨음) — 한 가상요소에 두 층 */
.column::before { content: ""; position: absolute; left: 50%; top: -11px; bottom: -40vh; width: 6px; margin-left: -3px; pointer-events: none; z-index: 0;
  background: var(--knot-img) top center / 6px 6px no-repeat, linear-gradient(rgba(110, 156, 146, .45), rgba(110, 156, 146, .45)) 50% 6px / 1px 100% no-repeat; }
.column.ps-knot-tug::before { animation: psKnotTug 180ms var(--ease-waddle); }
.column.empty-target::before { inset: auto; left: 50%; top: -11px; bottom: -40vh; right: auto; }
/* 빈 열 자리: 테이블보다 어둡고 푸른 슬롯 */
.column:empty::after, .column.empty-target::after { content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: var(--ratio); background: var(--table-slot); border-radius: 3px; z-index: 0; pointer-events: none; }
.column.drop-ok::after { top: -3px; bottom: auto; left: -2px; right: -2px; width: auto; height: calc(100% + 6px); min-height: 60px; margin: 0; opacity: 1; background: none; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--hint); }
.column.hint-dst::after { top: -3px; bottom: auto; left: -2px; right: -2px; width: auto; height: calc(100% + 6px); min-height: 60px; opacity: 1; background: none; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--hint); animation: psHintThread 1000ms linear 1 both !important; }

/* ---------- 7. 카드 ---------- */
.card {
  --cw: var(--real-card-w, 33px);
  --rh: min(10.5px, calc(var(--cw) * .31));
  border-radius: max(3px, calc(var(--cw) * .09));
  background: var(--card-face);
  box-shadow: 0 -1px 0 var(--card-edge), 0 1px 0 rgba(35, 64, 63, .55);
  overflow: hidden; z-index: 1;
  transition: top 160ms var(--ease-out-soft), transform 90ms var(--ease-out-soft);
}
.column > .card:last-child { box-shadow: 0 -1px 0 var(--card-edge), 0 2px 0 var(--shadow-table); }
.card.red { color: var(--suit-red); }
.card.black { color: var(--suit-black); }
/* 4색 덱 기본(스페이드/클로버 8x8 형태 구분 한계 보완) */
.card.s-club { color: var(--suit-green); } .card.s-diamond { color: var(--suit-blue); }
.card.dim { background: var(--card-dim); filter: none; }
.card.dim .corner, .card.dim .big { opacity: .78; }
.card .face { font-weight: 800; }
/* 좌상단 인덱스: 도트 랭크 + 무늬 */
.card .corner { top: 1.5px; left: 2px; flex-direction: row; align-items: flex-start; gap: max(1px, calc(var(--rh) * .15)); line-height: 0; }
.card .corner .r { display: none; }
.gr, .gs { display: block; flex: none; fill: currentColor; shape-rendering: crispEdges; overflow: visible; }
.card .gr { height: var(--rh); width: calc(var(--rh) * var(--gw)); }
.card .corner .gs { width: calc(var(--rh) * .82); height: calc(var(--rh) * .82); margin-top: calc(var(--rh) * .09); }
/* 본문: A~10은 큰 무늬 하나, 그림카드는 초상 + 받침 */
.card .big.art.rank-center { inset: auto; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; }
.card .big .pip { width: calc(var(--cw) * .52); height: calc(var(--cw) * .52); }
/* 겹쳐 가려진 카드의 큰 무늬는 숨김(가려진 띠 사이로 무늬 윗부분이 비쳐 소음이 되지 않게) */
.column > .card:not(:last-child) .big.rank-center { visibility: hidden; }
.card.facecard .big.art, .card.joker-card .big.art { inset: auto 8% 4% 8%; top: calc(var(--rh) + 6px); display: flex; align-items: flex-end; justify-content: center; }
.card.facecard .big.art::before, .card.joker-card .big.art::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 18%; max-height: 7px;
  background: var(--surface-2); border-radius: 50%;
}
.card .big.art .pix { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; animation: none !important; }
.card.joker-card { color: var(--suit-black); background: linear-gradient(to top left, var(--accent-1) 0 50%, var(--card-face) 50% 100%); }
.card.joker-card .corner .gs { color: var(--accent-1); }
/* 뒷면: 쪽빛 판 + 거미 날실 + 실 뒤에서 엿보는 눈 */
.card.down { background: var(--card-back-img) center / 100% 100% no-repeat, #34466E; box-shadow: 0 -1px 0 #4B5F8E, 0 1px 0 rgba(20, 28, 48, .5); }
.card.down .back-art { display: none; }
/* 골드카드(포인트카드): 3톤 금색 + 코인 */
.card.goldwrap {
  background: var(--gold-hi); color: var(--gold-ink);
  box-shadow: inset 0 3px 0 var(--gold), inset 0 -4px 0 var(--gold-shade), 0 -1px 0 var(--card-edge);
  animation: none !important;
}
.card.goldwrap .big.art { inset: 0; display: flex; align-items: center; justify-content: center; }
.card.goldwrap .big.art img, .card.goldwrap .big.art .coin-ico { width: 52%; height: auto; }
.card.goldwrap::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 6px; background: #FFF6D6; opacity: .8; transform: translateX(-40px) rotate(18deg); animation: psGloss 420ms var(--ease-in-out) 200ms 1 both; }
/* 상태 */
.card.movable { cursor: grab; }
.card.hint-src { animation: psHintHop 480ms var(--ease-waddle) 2 !important; }
.card.hint-dst-card { animation: none !important; box-shadow: 0 -1px 0 var(--card-edge), 0 3px 0 var(--hint); }
.card.shake { animation: psWrong 260ms linear !important; }
.card.land { animation: psLand 180ms var(--ease-waddle) !important; }
.card.pop { animation: psLand 180ms var(--ease-waddle) !important; }
.card.dragging, .card-ghost .card, .card.lifted { box-shadow: 0 7px 0 rgba(20, 32, 40, .35); }
.card-ghost .card:first-child { transform: translateY(-4px) rotate(-1.5deg) scale(1.05); }

/* ---------- 8. 선반: 파운데이션(항아리 뚜껑 슬롯) + 스톡 ---------- */
#topbar { order: 1; } #board { order: 2; } #stockbar { order: 3; } #tutorialBox { order: 4; } #bottombar { order: 5; } #adspace { order: 6; }
#stockbar {
  min-height: 64px; padding: 8px 10px 6px; align-items: flex-end; gap: 10px;
  background: var(--wood); box-shadow: inset 0 3px 0 var(--wood-hi), 0 4px 0 var(--wood-shade);
  z-index: 6;
}
.foundations { gap: 4px; height: auto; align-items: flex-end; }
.found-slot {
  width: 30px !important; min-width: 30px; max-width: 30px; height: 44px !important; min-height: 44px; max-height: 44px;
  background: none; border: 0; box-shadow: none; overflow: visible !important; display: flex; align-items: flex-end; justify-content: center;
}
.found-slot::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 7px; border-radius: 50%; background: var(--wood-slot); z-index: 0; }
.found-slot.ps-streak::after { background: var(--gold); }
.found-slot::before { display: none !important; }
.found-slot.filled::before {
  display: block !important; content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 30px; border-radius: 3px;
  background: var(--card-face); box-shadow: 1px -1px 0 var(--card-edge), 2px -2px 0 var(--card-face), 3px -3px 0 var(--card-edge); animation: none !important; opacity: 1; z-index: 0;
}
.found-slot .found-king { position: relative; z-index: 1; width: 28px; height: 28px; margin-bottom: 4px; object-fit: contain; image-rendering: pixelated; animation: none; }
.found-slot.ps-new .found-king { animation: psPotPop 260ms var(--ease-waddle) 440ms both; }
/* 기존 네온/글로우 연출 레이어는 새 모션 언어에서 쓰지 않음 */
.found-slot .char-neon-trace, .found-slot svg.char-neon-trace, .bonus-reason-tag, .screen-flash { display: none !important; }
.stock { align-self: flex-end; }
.mini-back { background: var(--card-back-img) center / 100% 100% no-repeat, #34466E; border-radius: 3px; box-shadow: 0 -1px 0 #4B5F8E; }
.mini-back .mini-spider { display: none; }
.stock.empty { background: none; }
.stock.empty::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 7px; border-radius: 50%; background: var(--wood-slot); }
.stock.stock-attn { animation: psNudge 260ms var(--ease-in-out) 2 !important; }

/* ---------- 9. 하단 버튼바(선반과 한 가구) ---------- */
#bottombar { background: var(--wood); box-shadow: inset 0 3px 0 var(--wood-hi); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
#bottombar .hint { color: var(--surface); font-weight: 700; font-size: 13px; }
.actions { gap: 10px; }
.act {
  min-height: 52px; border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  box-shadow: 0 4px 0 var(--wood-shade); padding: 6px 4px 4px;
  transition: transform 160ms var(--ease-waddle);
}
.act:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-shade); transition: transform 70ms var(--ease-out-soft); }
.act .ico { width: 24px; height: 24px; font-size: 0; }
.act .ico img, .act .ico .ps-ico { width: 24px; height: 24px; }
.act .lbl { font-family: var(--f-body); font-size: 11px; font-weight: 700; color: var(--ink); }
.act:disabled, .act.disabled { box-shadow: none; transform: translateY(3px); }
.act:disabled .ico, .act.disabled .ico { opacity: .45; }
.act .badge { top: -4px; right: -4px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; box-shadow: none; }

/* 튜토리얼 말풍선 */
.tutorial-box { background: var(--surface); color: var(--ink); border-radius: var(--r-panel); box-shadow: 0 4px 0 var(--wood-shade); }
.tutorial-text { color: var(--ink); font-size: 15px; }
.tutorial-highlight { animation: psHintHop 480ms var(--ease-waddle) 2 !important; }
.tutorial-box .diff { min-height: 44px; }

/* ---------- 10. 모션 키프레임(transform/opacity 전용) ---------- */
@keyframes psPanelIn { from { transform: translateY(20px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes psChipBump { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes psKnotTug { 0% { transform: translateY(0); } 50% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes psHintThread { 0% { opacity: 0; } 20% { opacity: 1; } 45% { opacity: .35; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes psHintHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes psWrong { 0% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } }
@keyframes psLand { 0% { transform: scale(1.03, .96); } 100% { transform: scale(1); } }
@keyframes psGloss { from { transform: translateX(-40px) rotate(18deg); } to { transform: translateX(60px) rotate(18deg); } }
@keyframes psPotPop { from { transform: translateY(100%); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes psNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes psFloatUp { from { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }

/* 카지노식 반복 맥동·섬광 제거(모션 언어 §3.10: 반복 CTA 흔들기 없음) */
.diff.double, .diff.gift, .mission-bar.claimable, .m-row-claim, .store-card-hot .store-card-badge,
.store-card-hot .store-card-art img, .store-gift-idle, .store-feat-item img, .home-nav-btn.has-badge .home-nav-ico,
.card .back-art.live, .card.c-j .pix, .card.c-q .pix, .card.c-k .pix { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
}
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }