/* R44 workroom uses the bakery's existing type, cream paper and brown ink. */
#mallangi-economy-home { width:100%; margin:18px auto 0; color:#6b3927; text-align:left; font-family:"Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
.ec-balance { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:13px; }
.ec-balance strong { font-size:18px; }.ec-balance small { font-size:12px; font-weight:normal; }.ec-balance i { font-style:normal; color:#cc9944; }
.ec-goal { display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid #b98c6059; border-radius:12px; background:#fffaf0; box-shadow:0 3px 0 #ae795521; }
.ec-art { width:77px; flex:none; }.ec-art svg { display:block; width:100%; }
.ec-goal-copy { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }.ec-goal-copy>small { font-size:12px; color:#79503b; }.ec-goal-copy>strong { font-size:17px; }.ec-goal-copy>span { font-size:12px; }
.ec-prompt { color:#79503b; }.ec-goal button, .ec-error button, #mallangi-economy-receipt button { border:1px solid #a86552; border-radius:8px; background:#8d493d; color:#fff9ef; font:inherit; cursor:pointer; padding:8px 10px; font-size:12px; min-height:44px; }
.ec-goal button { margin-top:3px; width:100%; }.ec-goal button:disabled { background:#eee2cc; color:#72513e; border-color:#c5ad88; cursor:default; }
.ec-ready { background:#fff6e4; border-color:#c3954f; }.ec-next { font-size:12px; text-align:center; margin:8px 0; color:#79503b; }
.ec-shelf { display:flex; align-items:flex-end; justify-content:center; gap:4px; border-bottom:5px solid #c09773; min-height:35px; margin:12px 4px 0; border-radius:3px; }
.ec-empty-shelf { color:#79503b; font-size:12px; padding:8px 0; }.ec-shelf-item { display:flex; flex-direction:column; align-items:center; width:20%; max-width:74px; }.ec-shelf-item svg { width:100%; }.ec-shelf-item small { font-size:12px; padding-bottom:5px; white-space:nowrap; }
.ec-new { animation:ec-arrive .35s ease-out; }@keyframes ec-arrive { from { transform:translateY(-10px); opacity:0; } to { transform:none; opacity:1; } }
.ec-notice { font-size:12px; text-align:center; min-height:0; margin:7px 0 0; }.ec-notice:empty { display:none; }
.ec-more { margin:10px 0 0; font-size:12px; }.ec-more summary { cursor:pointer; padding:7px 0; }.ec-catalog { display:grid; gap:6px; }.ec-catalog>div { display:flex; align-items:center; gap:9px; background:#fff9ef; border-radius:8px; padding:5px; }.ec-catalog svg { width:45px; height:40px; }.ec-catalog span { display:flex; flex-direction:column; gap:4px; }.ec-catalog small { color:#79503b; font-size:12px; }
.ec-error { padding:10px; background:#f6e5de; border-radius:8px; font-size:12px; margin:9px 0; }.ec-error button { display:block; margin-top:8px; }
.ec-complete { font-size:13px; text-align:center; padding:12px; }
#mallangi-economy-receipt { position:fixed; z-index:9; box-sizing:border-box; color:#6b3927; background:#fff7e8; border:1px solid #c3954f; box-shadow:0 3px 12px #5b341b20; border-radius:12px; padding:11px; font-family:"Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
.ec-last-receipt { font-size:12px; padding:7px 0 10px; color:#79503b; }.ec-last-receipt b { color:#80501f; }.ec-catalog button { margin-left:auto; border:1px solid #a86552; border-radius:6px; background:#8d493d; color:#fff9ef; font:inherit; padding:8px; cursor:pointer; }.ec-catalog button:disabled { background:#eee2cc; color:#72513e; cursor:default; }
#mallangi-economy-receipt[hidden] { display:none!important; }.ec-reward { display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:6px; }.ec-reward b { font-size:14px; color:#80501f; }.ec-reward strong { white-space:nowrap; }.ec-reward-next { display:flex; gap:5px; align-items:center; font-size:12px; margin-top:5px; }.ec-reward-next>span:not(.ec-mini-art) { flex:1; }.ec-mini-art svg { width:45px; height:40px; }.ec-saving { font-size:12px; }.ec-saving button { margin:8px; }
@media(max-width:600px) { #mallangi-economy-home { max-width:340px; margin-top:14px; }.ec-goal { padding:8px 10px; }.ec-art { width:65px; }.ec-goal-copy>strong { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .ec-new { animation:none; } }
.ec-breakdown { display:block; font-size:12px; color:#79503b; margin-top:3px; }
.ec-pace { color:#79503b; line-height:1.45; }
.ec-more summary { min-height:44px; box-sizing:border-box; display:flex; align-items:center; }
.ec-more summary::before { content:'▸'; margin-right:5px; }.ec-more[open]>summary::before { content:'▾'; }
.ec-catalog>div { flex-wrap:wrap; }.ec-catalog>div>span { flex:1; min-width:0; }
.ec-catalog-actions { display:flex; width:100%; gap:6px; padding-left:54px; box-sizing:border-box; }
.ec-catalog-actions button { margin-left:0; min-height:44px; flex:1; font-size:12px; }
.ec-catalog-actions button[data-ec="goal"] { background:#fff6e4; color:#6b3927; }.ec-catalog-actions button[aria-pressed="true"] { border-color:#6b3927; background:#efdbbd; }
.ec-daily { padding:10px; margin-top:12px; background:#fff9ef; border:1px solid #b98c603d; border-radius:10px; }
.ec-checkin { display:flex; align-items:center; justify-content:space-between; gap:8px; }.ec-checkin>span { display:flex; flex-direction:column; gap:5px; }.ec-checkin strong { font-size:12px; }.ec-checkin small { font-size:12px; color:#79503b; }
.ec-checkin button { min-height:44px; border:1px solid #a86552; border-radius:8px; background:#8d493d; color:#fff9ef; font:inherit; font-size:12px; padding:8px; flex-shrink:0; cursor:pointer; }.ec-checkin button:disabled { background:#eee2cc; color:#72513e; border-color:#c5ad88; cursor:default; }
.ec-quests { display:grid; gap:8px; }.ec-quest { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:8px; background:#fff2dc; border-radius:7px; }.ec-quest>span { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }.ec-quest strong,.ec-quest>b { font-size:12px; }.ec-quest small { font-size:12px; line-height:1.5; }.ec-quest>b { color:#80501f; white-space:nowrap; }.ec-quest progress { width:100%; height:5px; accent-color:#8d493d; }.ec-quest-done { background:#eef0df; }.ec-auto { font-size:12px; color:#79503b; }
html.ml-economy-review.ec-result-footer #unity-container { transform:scale(var(--ec-result-scale,1))!important; transform-origin:50% 0!important; }
#mallangi-economy-receipt.ec-footer { display:block; padding:8px 10px; height:auto; min-height:54px; bottom:calc(12px + env(safe-area-inset-bottom)); font-size:12px; line-height:1.4; }
.ec-footer-copy { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12px; }.ec-footer-copy small { font-size:12px; }.ec-footer button { flex-shrink:0; font-size:12px!important; padding:8px!important; }
#mallangi-economy-abandon { position:fixed; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:10; width:max-content; max-width:calc(100vw - 24px); padding:8px 12px; border:1px solid #b98c60; border-radius:8px; background:#fff7e8; color:#6b3927; font:13px/1.4 "Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; pointer-events:none; }
#mallangi-economy-abandon[hidden] { display:none!important; }
.ec-conversion { font-size:12px; color:#6b3927; margin:0 0 10px; }.ec-ready-alternative { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding:8px; background:#fff2dc; border-radius:8px; font-size:12px; }.ec-ready-alternative button { min-height:44px; font:inherit; border:1px solid #a86552; background:#8d493d; color:#fff9ef; border-radius:8px; padding:8px; }
html.ml-economy-review #mallangi-economy-home { padding-bottom:calc(16px + env(safe-area-inset-bottom)); font-size:12px; line-height:1.45; }
html.ml-economy-review.ec-workroom-visible #mallangi-telemetry-options { display:none!important; }
.ec-daily { margin:0 0 12px; }
.ec-attendance { font-size:12px; color:#79503b; text-align:right; }
.ec-challenge { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; margin-top:8px; padding:8px; border-radius:7px; background:#fff2dc; font-size:12px; }
.ec-challenge strong { font-weight:600; }.ec-challenge>span { color:#80501f; white-space:nowrap; }
.ec-reward { flex-wrap:wrap; }.ec-reward strong { white-space:normal; font-size:14px; }.ec-reward b { font-size:14px; }
.ec-receipt-balance { display:block; margin-top:2px; color:#79503b; font-size:14px; }
.ec-blueprints { display:flex; flex-wrap:wrap; column-gap:9px; font-size:12px; margin-top:4px; }
.ec-blueprints>span { display:block; }.ec-reward-next { min-height:44px; }
.ec-reward-next>span { display:flex; flex-direction:column; gap:2px; }.ec-reward-next small { font-size:12px; }
.ec-mini-art svg { width:34px; height:30px; }.ec-craft-success { color:#6b3927; }
.ec-backup { display:block; color:#79503b; font-size:12px; margin-top:4px; }
/* Busy locks the entire rack briefly. Keep card/slot surfaces steady instead of flashing a gray grid. */
#mallangi-economy-home button:disabled:not(.ks-item):not(.ks-slot),#mallangi-economy-receipt button:disabled { background:#eee2cc; color:#72513e; border-color:#a58767; cursor:default; }
#mallangi-economy-home :is(.ks-item,.ks-slot):disabled { cursor:default; }
/* D15 killstreak tab (user 2026-10-17: A 작업실 장착대 + 영수증 해금) */
.ks-tabs { display:flex; gap:6px; margin:12px 0 8px; }
.ks-tabs button { flex:1; font:inherit; font-size:14px; font-weight:700; border:1.5px solid #e7c9a0; background:#fffaf0; color:#8a6a58; border-radius:12px; padding:8px; min-height:44px; cursor:pointer; }
.ks-tabs button[aria-selected=true] { background:#fff3dc; color:#6b3927; border-color:#6b3927; }
.ks-rack { background:linear-gradient(#fff3dc,#f7e3c3); border:1.5px solid #e7c9a0; border-radius:18px; padding:10px 8px 6px; }
.ks-rack-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:0 6px 8px; }
.ks-rack-head strong { font-size:14px; white-space:nowrap; } .ks-rack-head span { font-size:11px; color:#8a6a58; text-align:right; }
.ks-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; justify-items:center; }
.ks-slot { width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; padding:0; font:inherit; color:#6b3927; cursor:pointer; }
.ks-ring { width:min(74px,20vw); height:min(74px,20vw); border-radius:50%; background:#fffaf0; border:4px solid #6b3927; display:grid; place-items:center; transition:transform .15s; }
.ks-ring .ks-icon { width:80%; height:80%; }
.ks-empty .ks-ring { border-style:dashed; border-color:#c9a988; background:#fbf1e1; }
.ks-plus { font-size:26px; color:#c9a988; }
.ks-target .ks-ring { box-shadow:0 0 0 5px #ffc93c8c; transform:scale(1.04); }
.ks-stage { font-size:12px; font-weight:800; white-space:nowrap; } .ks-stage small { font-weight:600; color:#8a6a58; }
.ks-sub { font-size:11px; color:#8a6a58; text-align:center; line-height:1.3; min-height:28px; word-break:keep-all; }
.ks-shelf { height:7px; border-radius:4px; background:#c98b52; margin:6px 6px 0; }
.ks-detail { min-height:50px; font-size:13px; line-height:1.5; margin:8px 2px; color:#4a2a1e; word-break:keep-all; } .ks-detail b { color:#6b3927; }
.ks-hint { color:#8a6a58; }
.ks-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ks-item { position:relative; min-width:0; background:#fffaf0; border:1.5px solid #e7c9a0; border-radius:14px; padding:6px 4px 7px; text-align:center; font:inherit; color:#4a2a1e; cursor:pointer; min-height:44px; }
.ks-item .ks-icon { width:50px; height:50px; display:block; margin:0 auto; }
.ks-item strong { display:block; font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-item small { display:block; font-size:11px; color:#8a6a58; word-break:keep-all; }
.ks-sel { border-color:#ffc93c; box-shadow:0 0 0 3px #ffc93c8c; }
.ks-locked .ks-icon { filter:grayscale(1); opacity:.4; }
.ks-next { border-color:#b86a5a; border-style:dashed; }
.ks-eq { position:absolute; top:4px; right:5px; font-size:10px; font-weight:800; background:#6b3927; color:#fff; border-radius:8px; padding:1px 5px; }
.ks-lock { position:absolute; top:4px; left:6px; font-size:11px; }
.ks-unlock { display:flex; gap:10px; align-items:center; margin-top:10px; padding:10px 12px; border:1px solid #b98c6059; border-radius:12px; background:#fffaf0; box-shadow:0 3px 0 #ae795521; }
.ks-unlock > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ks-unlock-art { width:58px; height:58px; flex:none; }
.ks-unlock strong { font-size:16px; } .ks-unlock span { font-size:12px; color:#79503b; }
.ks-tag { align-self:flex-start; font-size:11px; font-weight:800; border-radius:8px; padding:1px 7px; background:#fde6d6; color:#8a3a2a; }
.ks-unlock button { margin-top:4px; width:100%; border:1px solid #a86552; border-radius:8px; background:#8d493d; color:#fff9ef; font:inherit; font-size:13px; min-height:44px; cursor:pointer; }
.ks-done { justify-content:center; font-size:13px; color:#79503b; }
.ks-receipt-art { width:36px; height:36px; }
/* D15 2026-10-17 (user: “쓸데없는 텍스트 싹다 쳐내서 … 아이템 정비하는 등 그런 기능들은 따로 메뉴”): home card + 상점 menu */
.ksh-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid #e7c9a0; border-radius:16px; background:#fffaf0; box-shadow:0 3px 0 #ae795521; }
.ksh-slots { display:flex; gap:6px; }
.ksh-slot { width:40px; height:40px; border-radius:50%; border:2.5px solid #6b3927; background:#fff; display:grid; place-items:center; }
.ksh-slot.ksh-empty { border-style:dashed; border-color:#d3b694; background:#fbf1e1; }
.ksh-icon { width:32px; height:32px; }
.ksh-coins { display:flex; align-items:center; gap:5px; margin-left:auto; font-weight:800; font-size:17px; color:#4a2a1e; }
.ksh-coins i { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe27a,#d7922a); box-shadow:inset 0 0 0 1.5px #b7791f; }
.ksh-open { position:relative; min-height:44px; min-width:64px; padding:0 14px; border:0; border-radius:12px; background:#8d493d; color:#fff9ef; font:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 3px 0 #6b3427; }
.ksh-dot { position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:50%; background:#e2574c; box-shadow:0 0 0 2px #fffaf0; }
.ksm[hidden] { display:none !important; }
.ksm { position:fixed; inset:0; z-index:60; background:#00000040; display:flex; justify-content:center; align-items:stretch; }
.ksm-sheet { width:min(460px,100%); height:100%; overflow-y:auto; background:#fff9ef; padding:max(12px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); box-sizing:border-box; }
.ksm-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ksm-head strong { font-size:19px; color:#4a2a1e; }
.ksm-close { width:44px; height:44px; border-radius:50%; border:1.5px solid #e7c9a0; background:#fffaf0; color:#6b3927; font-size:26px; line-height:1; cursor:pointer; }
html.ksm-open, html.ksm-open body { overflow:hidden; }
.ks-tabs button[aria-selected=true] { box-shadow:inset 0 -3px 0 #e2574c; }
.ks-rack { padding:14px 8px 12px; }
.ks-ring { width:min(78px,21vw); height:min(78px,21vw); }
.ks-stage { font-size:13px; color:#79503b; }
.ks-grid .ks-item { padding:8px 4px 8px; }
.ks-item .ks-icon { width:56px; height:56px; }
.ks-locked .ks-icon { opacity:.32; }
.ks-price { display:inline-block; margin-top:3px; font-weight:800; color:#8a3a2a; background:#fde6d6; border-radius:8px; padding:0 7px; }
.ks-detail { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; min-height:0; margin:10px 2px; font-size:13px; }
.ks-detail span { color:#79503b; }
.ks-unlock { flex-direction:row; align-items:center; }
.ks-unlock > strong { flex:1; font-size:15px; }
.ks-unlock button { width:auto; margin:0; padding:0 14px; display:flex; align-items:center; gap:5px; }
.ks-unlock button i { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe27a,#d7922a); }
.ksm .ec-notice { min-height:18px; text-align:center; color:#79503b; font-size:13px; }
.ks-rack { margin-bottom:12px; }

/* 2026-10-19 slot prices: a locked slot shows a lock and its price; the item hint; the guide again button */
.ks-slot-locked .ks-ring { border-style:dashed; border-color:#c9a988; background:#f4ead9; }
.ks-slot-lock { font-size:26px; line-height:1; filter:grayscale(.2); }
.ksh-slot.ksh-locked { border-style:dashed; border-color:#d3b694; background:#efe4d2; font-size:16px; }
.ks-hint { margin:10px 2px 0; font-size:13px; color:#8a6a52; }
.ks-guide-again { display:block; margin:12px auto 0; padding:8px 14px; border-radius:999px; border:1.5px solid #6b3927; background:#fffaf0; color:#6b3927; font:inherit; font-weight:800; font-size:13px; }
/* Explain readiness, effect and payment in separate sentences on narrow screens. */
.ks-use-rule { margin:8px 2px 12px; font-size:13px; line-height:1.55; color:#79503b; word-break:keep-all; }
.ks-use-rule strong { display:block; color:#6b3927; }
.ks-stage { font-size:12px; }
.ks-slot .ks-price { font-size:11px; padding:2px 4px; }
.ks-detail { display:block; padding:10px 12px; border:1px solid #e7c9a0; border-radius:12px; background:#fffaf0; }
.ks-detail > b { display:block; font-size:15px; }
.ks-detail p { margin:6px 0 0; }
.ks-detail .ks-effect { padding-top:7px; margin-top:7px; border-top:1px solid #e7c9a066; }
.ks-effect strong,.ks-effect span { display:block; }
.ks-effect strong { color:#6b3927; font-size:12px; }
.ks-unlock { display:grid; grid-template-columns:58px minmax(0,1fr); }
.ks-unlock button { grid-column:1/-1; width:100%; justify-content:center; padding:8px 10px; line-height:1.4; }
/* KS-TUTORIAL: dim blocks around a ring, one bubble; the ring is a hole only on a tap step */
#ks-tutorial { position:fixed; inset:0; z-index:2147483000; pointer-events:none; }
#ks-tutorial .kst-block { position:fixed; background:#2a150d9e; pointer-events:auto; }
#ks-tutorial .kst-ring { position:fixed; border-radius:14px; box-shadow:0 0 0 3px #ffc93c, 0 0 0 7px #ffc93c55; pointer-events:auto; transition:all .18s ease; }
#ks-tutorial.kst-tap .kst-ring { pointer-events:none; animation:kst-pulse 1.1s ease-in-out infinite; }
@keyframes kst-pulse { 50% { box-shadow:0 0 0 4px #ffc93c, 0 0 0 12px #ffc93c33; } }
#ks-tutorial .kst-bubble { position:fixed; box-sizing:border-box; padding:12px 14px; border-radius:16px; background:#fff9ef; border:2px solid #6b3927; box-shadow:0 6px 0 #6b392733; color:#4a2a1e; pointer-events:auto; font-size:15px; line-height:1.45; }
#ks-tutorial .kst-text { margin:0 0 10px; word-break:keep-all; }
#ks-tutorial .kst-text b { color:#b72e24; }
#ks-tutorial .kst-row { display:flex; align-items:center; gap:8px; }
#ks-tutorial .kst-count { flex:1; font-size:12px; color:#9a7563; font-weight:700; }
#ks-tutorial button { min-height:40px; padding:0 14px; border-radius:12px; font:inherit; font-weight:800; font-size:14px; cursor:pointer; }
#ks-tutorial .kst-skip { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); z-index:2; pointer-events:auto; min-height:44px; padding:0 12px; border:1.5px solid #c9a988; background:#fff9ef; color:#8a6a52; font-size:13px; }
#ks-tutorial .kst-next { border:0; background:#e2574c; color:#fff; box-shadow:0 3px 0 #b72e24; }
#ks-tutorial .kst-next[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { #ks-tutorial .kst-ring { transition:none; animation:none; } }
/* QUEST-JOURNAL: the 일일 퀘스트 card in the home's counter dock with a KakaoTalk-style red count (HOME-REDESIGN below) */
/* TUTORIAL-BTN: the small round ? at the menu's top left (tutorial again) */
.ec-help { position:fixed; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); z-index:8; width:40px; height:40px; padding:0; border-radius:50%;
  border:1.5px solid #d9b994; background:#fffaf0; color:#6b3927; font:900 22px/1 "Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif; box-shadow:0 3px 0 #ae795533; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ec-help span { display:block; transform:translateY(-1px); }
.ec-help:active { transform:translateY(2px); box-shadow:none; }
html:not(.ec-menu-visible) .ec-help, html.ksm-open .ec-help, html:not(.ec-menu-visible) #mallangi-economy-home .ec-journal, html.ksm-open #mallangi-economy-home .ec-journal { display:none; }
/* WEEKLY-POPUP: the weekly 1st-place celebration (gold crown = score 1st, red crown = combo 1st) */
#ec-weekly-popup { position:fixed; inset:0; z-index:2147483100; display:grid; place-items:center; padding:16px; background:#2a150dad; font-family:"Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; overflow:hidden; }
.ec-weekly-card { position:relative; width:min(340px,100%); box-sizing:border-box; padding:22px 18px 18px; border-radius:22px; background:#fff9ef; border:2.5px solid #6b3927; box-shadow:0 8px 0 #6b392755; color:#4a2a1e; text-align:center; animation:ec-weekly-pop .45s cubic-bezier(.2,1.5,.4,1) both; }
.ec-weekly-title { display:block; font-size:20px; font-weight:900; color:#b72e24; margin-bottom:12px; word-break:keep-all; }
.ec-weekly-lines { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.ec-weekly-line { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; background:#fff; border:1.5px solid #ead6bd; font-size:15px; font-weight:800; text-align:left; }
.ec-weekly-line svg { width:30px; height:23px; flex:none; }
.ec-weekly-line span { flex:1; }
.ec-weekly-line b { color:#8a5a10; white-space:nowrap; }
.ec-weekly-total { margin:0 0 10px; font-size:14px; color:#6b3927; }
.ec-weekly-total b { font-size:18px; color:#8a5a10; }
.ec-weekly-rule { margin:0 0 14px; font-size:12px; line-height:1.5; color:#8a6a52; }
.ec-weekly-ok { min-height:48px; width:100%; border:0; border-radius:14px; background:#e2574c; color:#fff; font:inherit; font-size:16px; font-weight:900; box-shadow:0 4px 0 #b72e24; cursor:pointer; }
.ec-weekly-confetti { position:absolute; inset:0; pointer-events:none; }
.ec-weekly-confetti i { position:absolute; top:-12px; width:8px; height:13px; border-radius:2px; animation:ec-weekly-fall 2.4s ease-in forwards; }
@keyframes ec-weekly-pop { from { transform:scale(.6); opacity:0; } }
@keyframes ec-weekly-fall { to { transform:translateY(110vh) rotate(540deg); opacity:.9; } }
@media (prefers-reduced-motion: reduce) { .ec-weekly-card { animation:none; } .ec-weekly-confetti { display:none; } }
.ec-journal-badge { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; border-radius:10px; background:#ff3b30; color:#fff;
  font:800 12px/20px "Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif; font-style:normal; text-align:center; border:2px solid #fffaf0; }
/* QUEST-POPUP: the 일지 opens a Hearthstone quest log / Clash Royale daily tasks style popup over the menu */
#ec-quest-pop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:12px; box-sizing:border-box; background:#2a150d9e; overflow-y:auto;
  font-family:"Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; color:#4a2a1e; animation:eqp-fade .18s ease-out; -webkit-tap-highlight-color:transparent; }
.eqp-card { position:relative; width:min(400px,100%); box-sizing:border-box; padding:30px 14px 14px; margin-top:14px; border-radius:24px; background:#fff9ef; border:3px solid #6b3927;
  box-shadow:0 8px 0 #6b392766, 0 18px 40px #00000040; animation:eqp-pop .32s cubic-bezier(.2,1.5,.45,1); }
.eqp-head { position:absolute; left:0; right:0; top:-22px; display:flex; justify-content:center; pointer-events:none; }
.eqp-ribbon { position:relative; padding:9px 30px 10px; border-radius:14px; background:linear-gradient(#f0695d,#d2463a); border:3px solid #6b3927; box-shadow:0 4px 0 #6b3927;
  color:#fff; font-size:20px; font-weight:900; letter-spacing:.5px; text-shadow:0 2px 0 #8f2a20; white-space:nowrap; }
.eqp-x { position:absolute; top:12px; right:-8px; pointer-events:auto; width:44px; height:44px; padding:0; border-radius:50%; border:3px solid #6b3927; background:#fffaf0; color:#6b3927;
  font:900 26px/1 "Mallangi Sans",sans-serif; box-shadow:0 3px 0 #6b3927; cursor:pointer; }
.eqp-x:active { transform:translateY(2px); box-shadow:none; }
.eqp-sub { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:6px 2px 10px; font-size:13px; font-weight:800; color:#8a6a52; }
.eqp-left b { display:inline-block; min-width:64px; margin-left:4px; padding:2px 8px; border-radius:999px; background:#4a2a1e; color:#ffe7a8; font-variant-numeric:tabular-nums; text-align:center; }
.eqp-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.eqp-q { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px 9px; border-radius:16px; background:linear-gradient(#fff,#fff2dc);
  border:2.5px solid #d9b994; box-shadow:0 4px 0 #d9b99488; text-align:center; animation:eqp-rise .36s cubic-bezier(.2,1.3,.5,1) both; overflow:hidden; }
.eqp-q strong { font-size:14px; font-weight:900; line-height:1.2; word-break:keep-all; }
.eqp-art { position:relative; width:56px; height:50px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 50% 40%,#fff6d8,#f6dfb4); }
.eqp-art img { width:44px; height:auto; display:block; }
.eqp-art-three img { position:absolute; width:28px; }
.eqp-art-three .eqp-m1 { left:4px; top:18px; } .eqp-art-three .eqp-m2 { left:14px; top:6px; z-index:1; } .eqp-art-three .eqp-m3 { right:4px; top:18px; z-index:2; }
.eqp-art-challenge img { width:46px; }
.eqp-bar { position:relative; width:100%; height:18px; margin-top:auto; border-radius:999px; background:#ead8bd; box-shadow:inset 0 2px 0 #c9ad8833; overflow:hidden; }
.eqp-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(#8fdc6a,#54b23a); transition:width .4s ease-out; }
.eqp-bar em { position:relative; display:block; font-style:normal; font-size:11px; font-weight:900; line-height:18px; color:#3b2316; text-shadow:0 1px 0 #ffffffa6; }
.eqp-coin { display:inline-flex; align-items:center; gap:4px; margin-top:2px; padding:2px 9px 2px 5px; border-radius:999px; background:#4a2a1e; color:#ffe27a; font-size:13px; font-weight:900; }
.eqp-coin i { width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe27a,#d7922a); box-shadow:inset 0 0 0 1.5px #b7791f; }
.eqp-done { border-color:#e0a92e; background:linear-gradient(#fffbe8,#ffe9a8); box-shadow:0 4px 0 #c08a1e88; }
.eqp-done .eqp-bar i { background:linear-gradient(#ffd75e,#e5a61f); }
.eqp-done .eqp-art, .eqp-done strong, .eqp-done .eqp-coin { opacity:.72; }
.eqp-stamp { position:absolute; top:20px; left:50%; transform:translateX(-50%) rotate(-14deg); padding:3px 9px; border:3px solid #d2463a; border-radius:10px; background:#fff9efe6;
  color:#d2463a; font-size:17px; font-weight:900; letter-spacing:1px; white-space:nowrap; box-shadow:0 2px 0 #d2463a44; animation:eqp-stamp .4s cubic-bezier(.3,1.6,.5,1) .3s both; }
.eqp-att { display:flex; flex-direction:column; gap:9px; margin-top:12px; padding:10px 12px 12px; border-radius:16px; background:#fff; border:2px solid #ead6bd; }
.eqp-att strong { font-size:13px; font-weight:900; }
.eqp-dots { list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; gap:4px; }
.eqp-dots li { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f3e8d6; box-shadow:inset 0 0 0 2px #e2cfb1; color:#a08670; font-size:13px; font-weight:900; }
.eqp-dots li.eqp-on { background:radial-gradient(circle at 35% 35%,#ff8a7e,#d2463a); box-shadow:inset 0 0 0 2px #9e2a20, 0 2px 0 #9e2a2055; color:#fff; text-shadow:0 1px 0 #8f2a20; }
.eqp-dots li.eqp-today { box-shadow:inset 0 0 0 2px #e2cfb1, 0 0 0 2.5px #e5a61f; color:#6b3927; }
.eqp-dots li.eqp-on.eqp-today { box-shadow:inset 0 0 0 2px #9e2a20, 0 0 0 2.5px #e5a61f; color:#fff; }
/* ATTEND-CYCLE: preview every reward; the number is a claim day, independent of weekdays. */
.eqp-dots li { position:relative; }
.eqp-dots li span { font-size:11px; color:#6b3927; }
.eqp-dots li.eqp-on span { color:#fff; }
.eqp-dots li small { position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:900; color:#8a5a10; white-space:nowrap; text-shadow:none; }
.eqp-dots li.eqp-today:not(.eqp-on) small { color:#8a5a10; }
.eqp-att { padding-bottom:24px; }
.eqp-privacy:empty { display:none; }
@keyframes eqp-fade { from { background:#2a150d00; } }
@keyframes eqp-pop { from { transform:scale(.55); opacity:0; } }
@keyframes eqp-rise { from { transform:translateY(16px) scale(.92); opacity:0; } }
@keyframes eqp-stamp { from { transform:translateX(-50%) rotate(-14deg) scale(2.2); opacity:0; } }
/* QA D4 (바뀐 칸만 움직이기): after the first draw the cards stay put; only a newly done card's stamp and a newly taken attendance
   stamp play */
.eqp-settled .eqp-q, .eqp-settled .eqp-stamp { animation:none; }
.eqp-settled .eqp-q.eqp-fresh .eqp-stamp { animation:eqp-stamp .4s cubic-bezier(.3,1.6,.5,1) both; }
.eqp-dots li.eqp-fresh { animation:eqp-dot-stamp .42s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes eqp-dot-stamp { from { transform:scale(1.7); opacity:0; } 60% { transform:scale(.9); opacity:1; } }
#ec-quest-pop .eqp-card:focus { outline:none; }
@media (max-width:370px) { .eqp-card { padding:28px 10px 12px; } .eqp-q { padding:8px 4px; } .eqp-q strong { font-size:13px; } .eqp-art { width:50px; height:46px; } .eqp-dots li { width:30px; height:30px; font-size:12px; } .eqp-dots { gap:3px; } }
@media (max-width:370px) { .eqp-dots li span { font-size:10.5px; } }
@media (prefers-reduced-motion: reduce) { #ec-quest-pop, .eqp-card, .eqp-q, .eqp-stamp, .eqp-settled .eqp-q.eqp-fresh .eqp-stamp, .eqp-dots li.eqp-fresh { animation:none; } .eqp-bar i { transition:none; } }
/* COIN-SETTLE-POPUP: after the result card, the sale turns into coins (flying coins, counters, bonus rows) */
#ec-coin-pop { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:12px; box-sizing:border-box; background:#2a150d9e; overflow-y:auto;
  font-family:"Mallangi Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; color:#4a2a1e; animation:eqp-fade .18s ease-out; -webkit-tap-highlight-color:transparent; }
.ecp-card { position:relative; width:min(340px,100%); box-sizing:border-box; padding:34px 18px 16px; margin-top:16px; border-radius:24px; background:#fff9ef; border:3px solid #6b3927;
  box-shadow:0 8px 0 #6b392766, 0 18px 40px #00000040; text-align:center; animation:eqp-pop .32s cubic-bezier(.2,1.5,.45,1); }
.ecp-ribbon { position:absolute; left:50%; top:-22px; transform:translateX(-50%); padding:9px 30px 10px; border-radius:14px; background:linear-gradient(#ffd75e,#e5a61f); border:3px solid #6b3927;
  box-shadow:0 4px 0 #6b3927; color:#5a2e0e; font-size:20px; font-weight:900; white-space:nowrap; text-shadow:0 1px 0 #fff3c4; }
.ecp-sale { display:flex; flex-direction:column; gap:2px; align-items:center; }
.ecp-sale b { font-size:30px; font-weight:900; color:#b72e24; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.ecp-arrow { display:flex; flex-direction:column; align-items:center; gap:1px; margin:4px 0 2px; }
.ecp-arrow i { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #e5a61f; opacity:.35; }
.ecp-anim:not(.ecp-done) .ecp-arrow i { animation:ecp-chev .9s ease-in-out infinite; }
.ecp-arrow i:nth-child(2) { animation-delay:.15s !important; } .ecp-arrow i:nth-child(3) { animation-delay:.3s !important; }
.ecp-coins { display:inline-flex; align-items:center; gap:8px; padding:8px 18px 8px 12px; border-radius:999px; background:#4a2a1e; color:#ffe27a; }
.ecp-coins b { font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; }
.ecp-coins small { font-size:14px; font-weight:800; color:#f6dca4; }
.ecp-coin, .ecp-flycoin { display:inline-block; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd84a 40%,#d7922a 75%); box-shadow:inset 0 0 0 2px #b7791f, 0 2px 0 #7a4a12; }
.ecp-bonus { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ecp-bonus li { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:12px; background:#fff; border:2px solid #ead6bd; font-size:14px; font-weight:800; }
.ecp-bonus li b { color:#8a5a10; font-size:16px; font-weight:900; }
.ecp-anim .ecp-bonus li { opacity:0; transform:translateX(-16px) scale(.92); }
.ecp-anim .ecp-bonus li.ecp-in { animation:ecp-row .35s cubic-bezier(.2,1.5,.45,1) forwards; }
.ecp-total { display:flex; justify-content:space-between; align-items:center; margin:12px 0 4px; padding:10px 14px; border-radius:14px; background:linear-gradient(#fffbe8,#ffe9a8); border:2.5px solid #e0a92e; }
.ecp-total span { font-size:14px; font-weight:900; color:#6b3927; }
.ecp-total b { font-size:26px; font-weight:900; color:#8a5a10; font-variant-numeric:tabular-nums; }
.ecp-done .ecp-wallet { animation:ecp-glow 1.2s ease-out 1; }
.ecp-refill, .ecp-balance, .ecp-backup, .ecp-stay { display:block; margin-top:4px; font-size:13px; font-weight:700; color:#8a6a52; }
.ecp-refill { color:#b72e24; }
.ecp-ok, .ecp-retry { width:100%; min-height:48px; margin-top:12px; border:0; border-radius:14px; background:#e2574c; color:#fff; font:inherit; font-size:16px; font-weight:900; box-shadow:0 4px 0 #b72e24; cursor:pointer; }
.ecp-retry { background:#fffaf0; color:#6b3927; border:2px solid #d9b994; box-shadow:0 3px 0 #d9b99488; }
.ecp-msg { margin:6px 0 2px; font-size:15px; font-weight:800; }
.ecp-bump { animation:ecp-bump .28s ease-out; }
.ec-fly { position:fixed; inset:0; z-index:2147483600; pointer-events:none; }
.ecp-flycoin { position:fixed; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px; opacity:0; animation:ecp-fly .62s cubic-bezier(.45,0,.55,1) both; }
@keyframes ecp-fly { 0% { transform:translate(var(--sx),var(--sy)) scale(.5); opacity:0; } 15% { opacity:1; } 50% { transform:translate(var(--mx),var(--my)) scale(1.15); } 100% { transform:translate(var(--tx),var(--ty)) scale(.8); opacity:1; } }
@keyframes ecp-row { to { opacity:1; transform:none; } }
@keyframes ecp-bump { 40% { transform:scale(1.18); } }
@keyframes ecp-chev { 50% { opacity:1; transform:translateY(3px); } }
@keyframes ecp-glow { 0% { box-shadow:0 0 0 0 #ffd75e; } 40% { box-shadow:0 0 0 10px #ffd75e66; } 100% { box-shadow:0 0 0 18px #ffd75e00; } }
/* COIN-POPUP-R2: the 보유 balance the run's coins are absorbed into */
.ecp-wallet { display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 2px; padding:10px 14px; border-radius:16px; background:linear-gradient(#fffbe8,#ffe9a8); border:2.5px solid #e0a92e; }
.ecp-wallet span:first-child { font-size:15px; font-weight:900; color:#6b3927; }
.ecp-wallet b { font-size:30px; font-weight:900; color:#8a5a10; font-variant-numeric:tabular-nums; line-height:1; }
.ecp-absorb .ecp-coins { animation:ecp-drain 1.1s ease-in-out 1; }
@keyframes ecp-drain { 30% { transform:scale(.92); } 60% { transform:scale(1.05); } }
/* QUEST-CLAIM / ATTEND-CLAIM: 받기 buttons in the 일지, a ready card glows, the balance the coins fly into */
.eqp-claim { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:30px; padding:3px 10px 3px 6px; border:0; border-radius:999px; background:linear-gradient(#ffd75e,#e5a61f); color:#5a2e0e;
  font:inherit; font-size:13px; font-weight:900; box-shadow:0 3px 0 #b7791f; cursor:pointer; white-space:nowrap; animation:eqp-claim-pulse 1.2s ease-in-out infinite; }
.eqp-claim i { width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff3b0,#d7922a); box-shadow:inset 0 0 0 1.5px #b7791f; }
.eqp-claim:active { transform:translateY(2px); box-shadow:none; }
.eqp-claim:disabled { opacity:.6; animation:none; }
.eqp-q.eqp-ready { border-color:#e0a92e; box-shadow:0 4px 0 #c08a1e88, 0 0 0 3px #ffd75e66; }
.eqp-att-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; }
.eqp-att-ready .eqp-dots li.eqp-today { animation:eqp-today-pulse 1.2s ease-in-out infinite; }
.eqp-wallet { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0; font-weight:900; color:#6b3927; }
.eqp-wallet span { font-size:13px; }
.eqp-wallet i { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd84a 40%,#d7922a 75%); box-shadow:inset 0 0 0 1.5px #b7791f; }
.eqp-wallet b { font-size:20px; color:#8a5a10; font-variant-numeric:tabular-nums; }
@keyframes eqp-claim-pulse { 50% { transform:scale(1.06); box-shadow:0 3px 0 #b7791f, 0 0 0 5px #ffd75e55; } }
@keyframes eqp-today-pulse { 50% { box-shadow:inset 0 0 0 2px #e2cfb1, 0 0 0 5px #ffd75e88; } }
@media (prefers-reduced-motion: reduce) { #ec-coin-pop, .ecp-card, .ecp-bump, .ecp-done .ecp-wallet, .ecp-absorb .ecp-coins, .eqp-claim, .eqp-att-ready .eqp-dots li.eqp-today { animation:none; } .ecp-flycoin { display:none; } }

/* FINISH-POLISH: stable scrolling, readable states and shared bakery controls. */
.ksh-card { flex-wrap:wrap; gap:8px; }
.ksh-slots { flex-shrink:0; }
.ksh-slot { box-sizing:border-box; }
.ksh-coins { min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.ksh-open { flex-shrink:0; }
.ksm-sheet { display:flex; flex-direction:column; overflow:hidden; }
.ksm-head, .ksm-sheet > .ks-tabs { flex-shrink:0; }
.ksm-body {
  min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 5px 8px 2px;
  scrollbar-width:thin; scrollbar-color:#b98c60 #fff9ef; scrollbar-gutter:stable;
}
.ksm-head strong { font-size:20px; }
.ksm-close { flex-shrink:0; border-color:var(--ml-ui-line); }
.ks-tabs { margin:10px 0 12px; gap:8px; }
.ks-tabs button { line-height:1.4; }
.ks-use-rule { margin:2px 2px 12px; }
.ks-grid { padding:3px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ks-item strong { white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; line-height:1.35; }
.ks-item .ks-icon { margin-top:8px; }
.ks-locked .ks-icon { opacity:.62; }
.ks-sel { border-color:#b7791f; box-shadow:0 0 0 2px #ffc93c; }
.ks-detail { margin:12px 2px; line-height:1.55; }
.ks-effect strong { font-size:13px; }
.ks-hint, .ec-goal-copy, .ec-catalog span, .ec-ready-alternative { word-break:keep-all; overflow-wrap:anywhere; line-height:1.5; }
.ec-goal-copy > span { font-size:13px; }
.ec-goal { gap:10px; }
.ec-catalog > div { padding:10px 6px; border-bottom:1px solid #ead7bb; border-radius:0; }
.ec-catalog-actions button { border-radius:12px; font-size:13px; }
.ec-more { font-size:13px; }
.ec-shelf { margin:20px 4px 14px; }
.ec-shelf-item small { white-space:normal; text-align:center; word-break:keep-all; }
.ec-help { box-shadow:0 3px 0 #ae795533; }
#mallangi-economy-home button:focus-visible,
#mallangi-economy-home summary:focus-visible,
#ec-quest-pop button:focus-visible,
#ec-coin-pop button:focus-visible,
#ks-tutorial button:focus-visible { outline:3px solid #b74330; outline-offset:3px; }
#ks-tutorial .kst-ring {
  box-shadow:inset 0 0 0 3px #ffc93c,inset 0 0 0 7px #ffc93c55;
  transition:none;
}
@keyframes kst-pulse { 50% { box-shadow:inset 0 0 0 4px #ffc93c,inset 0 0 0 10px #ffc93c33; } }
#ks-tutorial .kst-bubble { max-height:calc(100dvh - 24px); overflow:auto; }
#ks-tutorial button { min-height:44px; }
#ks-tutorial .kst-next, .ecp-ok { background:var(--ml-ui-coral); box-shadow:0 3px 0 #922f26; }
#ec-quest-pop, #ec-coin-pop { padding:28px 12px 20px; }
.eqp-card, .ecp-card { border-width:2px; box-shadow:var(--ml-ui-shadow); animation:finish-card-in .22s ease-out; }
.eqp-x {
  right:8px; border:1.5px solid var(--ml-ui-line);
  font-size:24px; font-weight:700; box-shadow:none;
}
.eqp-sub { flex-wrap:wrap; row-gap:6px; color:var(--ml-ui-muted); }
.eqp-q strong { line-height:1.4; }
.eqp-claim { min-height:40px; }
.eqp-dots li { flex-shrink:0; }

/* RESPONSIVE-FIT: HTML sheets follow the visible area rather than the hidden keyboard area. */
.ksm, #ec-quest-pop, #ec-coin-pop {
  top:var(--ml-viewport-top,0px); bottom:auto; height:var(--ml-viewport-height,100vh);
}
#ks-tutorial .kst-bubble { max-height:calc(var(--ml-viewport-height,100vh) - 24px); }
#ks-tutorial .kst-skip { top:calc(var(--ml-viewport-top,0px) + max(12px,env(safe-area-inset-top))); }
/* The short Unity menu reaches the screen bottom. Keep its informational notice in the
   inactive header band instead of covering the menu's home/confirmation buttons. */
.ml-short-viewport #mallangi-economy-abandon {
  top:calc(var(--ml-viewport-top,0px) + max(12px,env(safe-area-inset-top)));
  bottom:auto; z-index:30; box-sizing:border-box;
  max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)));
}
.ecp-ok:active, #ks-tutorial .kst-next:active { transform:translateY(2px); box-shadow:none; }
@keyframes finish-card-in { from { transform:translateY(8px) scale(.97); } }
@media (max-width:370px) {
  .ksm-sheet { padding-left:12px; padding-right:12px; }
  .ks-stage { font-size:11px; }
  .ks-ring { box-sizing:border-box; width:min(78px,21vw); height:min(78px,21vw); }
  .ks-item strong { font-size:12px; }
  .ksh-card { padding:10px; }
  .ksh-open { min-width:60px; padding:0 12px; }
  .ksh-coins { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .eqp-card, .ecp-card { animation:none; } }

/* DEVICE-CLIP: a short viewport must scroll the whole workroom, not a body
   squeezed beneath fixed heading/tabs. Every slot and item stays reachable. */
@media (max-height: 480px) {
  .ksm-sheet { display:block; overflow-y:auto; overscroll-behavior:contain; }
  .ksm-body { overflow:visible; padding-bottom:8px; }
}
@media (max-height: 180px) {
  .ksm-sheet { padding-top:8px; padding-bottom:8px; }
  .ks-rack { padding-top:6px; padding-bottom:6px; }
  .ks-slot .ks-ring { width:44px; height:44px; }
  .ks-grid .ks-item .ks-icon { width:36px; height:36px; margin-top:2px; }
  .ks-grid .ks-item { padding-top:6px; padding-bottom:6px; }
}

/* WORKSHOP-MOTION (user 2026-10-22: 제안 항목 전부 실제 반영; work/ui-motion-ab-2026-10-22/TICKET-IMPL.md). Resting looks,
   colours, layout and copy stay; mallangi-economy.js plays the motion after each render. */
/* #2 a press answers at once (120 ms ease-out); a slot gives only its ring. Release is the redraw, so it returns at once. */
@media (prefers-reduced-motion: no-preference) {
  #mallangi-economy-home .ksm button, #mallangi-economy-home .ksh-open { transition:transform 120ms cubic-bezier(0.23,1,0.32,1); }
  #mallangi-economy-home .ksm button:not(:disabled):active, #mallangi-economy-home .ksh-open:active { transform:scale(.97); }
  #mallangi-economy-home .ksm .ks-slot:not(:disabled):active { transform:none; }
  #mallangi-economy-home .ks-slot .ks-ring { transition:transform 120ms cubic-bezier(0.23,1,0.32,1); }
  #mallangi-economy-home .ks-slot:not(:disabled):active .ks-ring { transform:scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .ks-ring { transition:none; } }
/* #12 hover only where a real pointer hovers (a touch would leave it stuck) */
@media (hover:hover) and (pointer:fine) {
  #mallangi-economy-home .ksm .ks-item { transition:transform 120ms cubic-bezier(0.23,1,0.32,1), box-shadow 180ms ease; }
  #mallangi-economy-home .ksm .ks-item:not(.ks-sel):not(:disabled):hover { box-shadow:0 3px 0 #e7c9a0; }
}
/* #3 the selected outline is one element that slides between the tabs; at rest it draws the same border and red line */
.ks-tabs { position:relative; }
.ks-tabs button[aria-selected=true] { border-color:transparent; box-shadow:none; }
.ks-tab-ink { position:absolute; left:0; top:0; bottom:0; z-index:1; width:calc((100% - 8px) / 2); box-sizing:border-box; pointer-events:none;
  border:1.5px solid #6b3927; border-radius:12px; box-shadow:inset 0 -3px 0 #e2574c; transform:translateX(0); }
.ks-tabs[data-tab="decor"] .ks-tab-ink { transform:translateX(calc(100% + 8px)); }
/* #4 the result said where it was pressed (aria-hidden; the .ec-notice line stays the spoken status) */
.ksm-body { position:relative; }
.ks-bubble { position:absolute; left:0; top:0; z-index:3; transform:translateX(-50%); width:max-content; max-width:min(240px, calc(100% - 16px)); box-sizing:border-box;
  padding:7px 12px; border-radius:12px; background:#4a2a1e; color:#fff9ef; font-size:13px; font-weight:700; line-height:1.35; text-align:center;
  word-break:keep-all; pointer-events:none; box-shadow:0 4px 12px #482c2533; }
.ks-bubble::before { content:""; position:absolute; left:calc(50% + var(--tail, 0px)); top:-5px; width:10px; height:10px; margin-left:-5px;
  background:inherit; border-radius:2px; transform:rotate(45deg); }
.ks-bubble.ks-bubble-above::before { top:auto; bottom:-5px; }
/* #8 the icon flying from the picked card into the slot; #1 the closing copy of the sheet */
.ks-fly { position:fixed; z-index:80; margin:0; pointer-events:none; transform-origin:0 0; will-change:transform; }
.ksm-leaving { pointer-events:none; }
/* #9 a drawn lock in the slot's colour instead of the 🔒 emoji (상점 and the home card) */
.ks-slot-lock { filter:none; color:#b48b66; display:grid; place-items:center; }
.ks-lock-art { display:block; width:26px; height:26px; }
.ksh-lock { display:grid; place-items:center; color:#b48b66; }
.ksh-lock .ks-lock-art { width:18px; height:18px; }
/* #10 the card price keeps its intended ink (it was overridden by .ks-item small: 4.1:1 → 6.42:1); #11 badge 10 → 11 px */
.ks-item small.ks-price { color:#8a3a2a; }
.ks-eq { font-size:11px; }
/* #14 the browser's own surfaces in the bakery palette (the red :focus-visible ring is the FINISH-POLISH rule above) */
#mallangi-economy-home ::selection { background:#ffd98a; color:#4a2a1e; }

/* UI-TONE (2026-10-24, user: “인게임 뿐만 아니라 ui 싹다 저 톤에 맞게 정돈하셈”): the menu, 상점, 일일 퀘스트, coin and weekly
   popups, tutorial and toast in the in-game header's tone (tokens and the reasons: style.css html.ml-ui-y). Panels: cream face,
   cocoa edge, tan lip; rows: white face, 2 px cocoa edge; primary: strawberry jelly; ready to take: gold; no gradients. */
html.ml-ui-y #mallangi-economy-home, html.ml-ui-y #ec-quest-pop, html.ml-ui-y #ec-coin-pop, html.ml-ui-y #ec-weekly-popup { color:var(--y-ink); }
/* the ? = a header button (44 rounded square, cocoa edge, tan lip) under the awning at the 430 column's top left corner */
html.ml-ui-y .ec-help { width:44px; height:44px; border:var(--y-edge) solid var(--y-ink); border-radius:14px; background:var(--y-cream); color:var(--y-ink); box-shadow:0 3px 0 var(--y-lip);
  top:max(calc(38 * var(--y-u)), env(safe-area-inset-top)); left:max(12px, env(safe-area-inset-left), calc(50% - 203px)); font:900 24px/1 var(--ml-sans); }
html.ml-ui-y .ec-help:active { transform:translateY(1.5px); box-shadow:0 1.5px 0 var(--y-lip); }
/* ---- HOME-REDESIGN (2026-10-25; design work/background-drafts-2026-10-22/home-redesign/final). The panel's home pieces
   sit in index.html's counter dock (.sel-dock, a grid: "err" · "slots" · "quest start shop"; style.css HOME-REDESIGN):
   this panel and .ksh-card are display:contents, so render() replaces the markup and every piece keeps its cell. The
   coin pill hangs at the 430 column's top right (fixed, like the ?). Cards: cream face, cocoa edge, tan lip; the red
   count = things to take in 일일 퀘스트; the gold dot = something 상점 can open or make now. ---- */
html.ml-ui-y #mallangi-economy-home, html.ml-ui-y #mallangi-economy-home .ksh-card { display:contents; }
html.ml-ui-y #mallangi-economy-home .ksh-slots { grid-area:slots; position:relative; z-index:2; box-sizing:border-box; display:flex; gap:9px; margin:0 0 12px; padding:5px 12px 9px;
  font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  border:var(--y-edge) solid var(--y-ink); border-radius:999px; background:var(--y-cream); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y #mallangi-economy-home .ksh-slot { position:relative; box-sizing:border-box; width:38px; height:38px; border-radius:50%; border:2.5px solid var(--y-ink); background:var(--y-white); display:grid; place-items:center; }
html.ml-ui-y #mallangi-economy-home .ksh-slot.ksh-empty { border:2.5px dashed var(--y-pencil); background:var(--y-cream); }
html.ml-ui-y #mallangi-economy-home .ksh-slot.ksh-locked { border:2.5px solid var(--y-ink); background:var(--y-locked); }
html.ml-ui-y #mallangi-economy-home .ksh-icon { width:88%; height:88%; object-fit:contain; }
html.ml-ui-y #mallangi-economy-home .ksh-slot b { position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); height:14px; padding:0 5px; border-radius:7px; background:var(--y-ink); color:var(--y-cream);
  font:900 10px/14px var(--ml-sans); letter-spacing:.02em; white-space:nowrap; }
html.ml-ui-y .ksh-lock, html.ml-ui-y .ks-slot-lock { color:var(--y-ink); }
/* the coin pill (home and the 상점 head): the coin hangs over its left end (Bear Bakery's coin chip); no + */
html.ml-ui-y .ksh-coins { position:relative; box-sizing:border-box; display:flex; align-items:center; gap:0; height:36px; min-width:0; margin:0; padding:0 14px 0 30px;
  border:var(--y-edge) solid var(--y-ink); border-radius:999px; background:var(--y-cream); box-shadow:0 3px 0 var(--y-lip); color:var(--y-ink); font-weight:900; }
html.ml-ui-y .ksh-coins .ksh-coin { position:absolute; left:-15px; top:50%; width:38px; height:38px; transform:translateY(-50%); }
html.ml-ui-y .ksh-coins b { min-width:3ch; font:900 18px/1 var(--ml-sans); letter-spacing:-.01em; font-variant-numeric:tabular-nums; text-align:right; }
html.ml-ui-y #mallangi-economy-home .ksh-card > .ksh-coins { position:fixed; z-index:8; top:calc(max(calc(38 * var(--y-u)), env(safe-area-inset-top)) + 4px); right:max(12px, env(safe-area-inset-right), calc(50% - 203px)); }
/* the 일일 퀘스트 and 상점 cards beside 게임 시작 */
html.ml-ui-y #mallangi-economy-home .ec-mode, html.ml-ui-y #mallangi-economy-home .ksh-open {
  position:relative; inset:auto; z-index:2; box-sizing:border-box; width:78px; height:68px; min-width:0; min-height:0; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:var(--y-edge) solid var(--y-ink); border-radius:18px; background:var(--y-cream); color:var(--y-ink); box-shadow:0 var(--y-lip-h) 0 var(--y-lip);
  font:800 12.5px/1.1 var(--ml-sans); text-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
html.ml-ui-y #mallangi-economy-home .ec-mode { grid-area:mode; }
html.ml-ui-y #mallangi-economy-home .ksh-open { grid-area:shop; }
html.ml-ui-y #mallangi-economy-home .ec-mode svg, html.ml-ui-y #mallangi-economy-home .ksh-open svg { display:block; width:34px; height:34px; flex:none; }
html.ml-ui-y #mallangi-economy-home .ec-mode span, html.ml-ui-y #mallangi-economy-home .ksh-open span { white-space:nowrap; letter-spacing:-.02em; }
html.ml-ui-y #mallangi-economy-home .ec-mode span { display:block; font-size:14px; font-weight:900; }
html.ml-ui-y #mallangi-economy-home .ec-mode:active, html.ml-ui-y #mallangi-economy-home .ksh-open:active { transform:translateY(2.5px); box-shadow:0 1.5px 0 var(--y-lip); }
/* HOME-17: 일일 퀘스트 = a 44 px notebook beside ? at the 430 column's top left, the same header button look (rounded square,
   cocoa edge, tan lip) with its red count */
html.ml-ui-y #mallangi-economy-home .ec-journal { position:fixed; z-index:8; top:max(calc(38 * var(--y-u)), env(safe-area-inset-top)); left:calc(max(12px, env(safe-area-inset-left), calc(50% - 203px)) + 52px);
  box-sizing:border-box; width:44px; height:44px; margin:0; padding:0; display:grid; place-items:center; border:var(--y-edge) solid var(--y-ink); border-radius:14px;
  background:var(--y-cream); color:var(--y-ink); box-shadow:0 3px 0 var(--y-lip); cursor:pointer; -webkit-tap-highlight-color:transparent; }
html.ml-ui-y #mallangi-economy-home .ec-journal svg { display:block; width:30px; height:30px; }
html.ml-ui-y #mallangi-economy-home .ec-journal:active { transform:translateY(1.5px); box-shadow:0 1.5px 0 var(--y-lip); }
html.ml-ui-y #mallangi-economy-home .ec-journal-badge { position:absolute; top:-9px; right:-9px; box-sizing:border-box; min-width:23px; height:23px; padding:0 6px; border-radius:12px;
  background:var(--y-straw-ink); color:#FFFFFF; border:2px solid var(--y-cream); box-shadow:0 0 0 1.5px var(--y-straw-lip); font:900 12.5px/19px var(--ml-sans); font-style:normal; text-align:center; }
html.ml-ui-y #mallangi-economy-home .ksh-dot { position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; background:var(--y-gold); box-shadow:0 0 0 2px var(--y-ink); }
/* a storage problem: above the slots, full width, never over the cards */
html.ml-ui-y #mallangi-economy-home .ec-problems { grid-area:err; position:relative; z-index:2; width:100%; margin:0 0 10px; text-align:left; font:600 13px/1.45 var(--ml-sans); }
html.ml-ui-y #mallangi-economy-home .ec-problems .ec-error { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; margin:0 0 6px; padding:8px 8px 8px 12px;
  border:2px solid var(--y-straw-ink); font-size:12.5px; line-height:1.4; }
html.ml-ui-y #mallangi-economy-home .ec-problems .ec-error button { display:block; flex:none; margin:0; min-height:44px; padding:0 14px; font-size:13px; }
@media (max-height:520px) and (min-aspect-ratio:1/1) { html.ml-ui-y #mallangi-economy-home .ec-problems { justify-self:center; max-width:600px; } }
@media (max-width:345px) { html.ml-ui-y #mallangi-economy-home .ec-mode, html.ml-ui-y #mallangi-economy-home .ksh-open { width:74px; } }
/* the 상점 sheet head (final/shop.html): the awning, back, the shop front and 상점, the coin pill */
html.ml-ui-y .ksm-sheet { position:relative; padding:0 14px max(18px, env(safe-area-inset-bottom)); }
html.ml-ui-y .ksm-awning { position:absolute; left:0; right:0; top:0; z-index:2; height:calc(32 * var(--y-u)); pointer-events:none;
  background:var(--y-awning) calc(50% - 179.1667 * var(--y-u)) 0 / calc(71.6667 * var(--y-u)) calc(32 * var(--y-u)) repeat-x;
  filter:drop-shadow(0 calc(1.2 * var(--y-u)) calc(2.5 * var(--y-u)) rgba(184, 149, 122, .32)); }
html.ml-ui-y .ksm-head { position:relative; z-index:3; display:flex; align-items:center; gap:10px; margin:0; padding:max(calc(38 * var(--y-u)), env(safe-area-inset-top)) 0 0; }
html.ml-ui-y .ksm-close { display:grid; place-items:center; flex:none; padding:0; }
html.ml-ui-y .ksm-close svg { display:block; width:24px; height:24px; }
html.ml-ui-y .ksm-close:active { transform:translateY(1.5px); box-shadow:0 1.5px 0 var(--y-lip); }
html.ml-ui-y .ksm-title { display:flex; align-items:center; gap:7px; min-width:0; margin:0; color:var(--y-ink); font:900 26px/1 var(--ml-sans); letter-spacing:-.01em; text-shadow:0 2.5px 0 var(--y-lip); }
html.ml-ui-y .ksm-title svg { display:block; width:34px; height:34px; flex:none; }
html.ml-ui-y .ksm-head .ksm-title strong { font:inherit; color:inherit; white-space:nowrap; }
html.ml-ui-y .ksm-head .ksh-coins { margin-left:auto; margin-right:2px; flex:none; }
/* 상점 body (final/shop.html): tabs, the use rule, the slot rack (84 px rings, a coin on the slot price), the item cards
   (the equipped badge on the top edge) */
html.ml-ui-y .ks-tabs { margin:18px 0 0; }
html.ml-ui-y .ks-tabs button { min-height:46px; font-size:16px; }
html.ml-ui-y .ksm-body { padding:16px 2px 28px; }
html.ml-ui-y .ks-use-rule { margin:0 4px 14px; font-size:14px; font-weight:600; line-height:1.55; }
html.ml-ui-y .ks-use-rule strong { font-weight:800; }
html.ml-ui-y .ks-rack { margin:0; padding:16px 8px 14px; }
html.ml-ui-y .ks-slot { gap:8px; }
html.ml-ui-y .ks-slot .ks-ring { box-sizing:border-box; width:min(84px, 22vw); height:min(84px, 22vw); }
html.ml-ui-y .ks-stage { font-size:14px; font-weight:800; }
html.ml-ui-y .ks-slot .ks-price { display:inline-flex; align-items:center; gap:3px; margin:0 -10px; padding:3px 7px 3px 4px; font-size:12px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; line-height:1.3; }
html.ml-ui-y .ks-slot .ks-price::before { content:""; width:14px; height:14px; flex:none; border-radius:50%; background:radial-gradient(circle closest-side, var(--y-coin-core) 0 45%, var(--y-coin) 49% 100%); box-shadow:inset 0 0 0 1.5px var(--y-ink); }
html.ml-ui-y .ks-grid { gap:10px; margin-top:18px; }
html.ml-ui-y .ks-grid .ks-item { padding:14px 6px 10px; }
html.ml-ui-y .ks-item strong { font-size:14px; font-weight:800; }
html.ml-ui-y .ks-item small.ks-price { display:inline-block; margin-top:4px; padding:3px 9px; font-size:12.5px; font-weight:800; line-height:1.3; }
html.ml-ui-y .ks-locked .ks-icon { filter:grayscale(1); opacity:.55; }
html.ml-ui-y .ks-eq { top:-10px; left:50%; right:auto; transform:translateX(-50%); padding:2px 8px; border-radius:9px; font-weight:800; white-space:nowrap; }
html.ml-ui-y .ks-hint { margin:16px 4px 0; font-size:13px; font-weight:600; line-height:1.55; }
@media (max-width:400px) { html.ml-ui-y .ks-slot-locked .ks-price { align-self:flex-end; margin:0 -2px 0 -30px; } }
@media (max-width:370px) { html.ml-ui-y .ks-stage { font-size:12.5px; } html.ml-ui-y .ks-item strong { font-size:13px; } }
html.ml-ui-y .eqp-coin i, html.ml-ui-y .eqp-wallet i, html.ml-ui-y .eqp-claim i, html.ml-ui-y .ks-unlock button i,
html.ml-ui-y .ecp-coin, html.ml-ui-y .ecp-flycoin { background:radial-gradient(circle closest-side, var(--y-coin-core) 0 45%, var(--y-coin) 49% 100%); box-shadow:inset 0 0 0 1.5px var(--y-ink); }
html.ml-ui-y .ecp-coin, html.ml-ui-y .ecp-flycoin { box-shadow:inset 0 0 0 2px var(--y-ink); }
/* the primary: strawberry jelly with the cocoa edge and a deeper lip; the secondary: a cream button */
html.ml-ui-y .ks-unlock button, html.ml-ui-y .ec-goal button, html.ml-ui-y .ec-ready-alternative button,
html.ml-ui-y .ec-catalog-actions button[data-ec="buy"], html.ml-ui-y .ec-error button, html.ml-ui-y #ks-tutorial .kst-next,
html.ml-ui-y .ecp-ok, html.ml-ui-y .ec-weekly-ok {
  border:0; border-radius:14px; background:var(--y-straw); color:#fff; font-weight:900; text-shadow:0 1.5px 0 var(--y-straw-lip);
  box-shadow:inset 0 0 0 var(--y-edge) var(--y-ink), 0 var(--y-lip-h) 0 var(--y-straw-lip); }
html.ml-ui-y .ecp-ok:active, html.ml-ui-y .ec-weekly-ok:active, html.ml-ui-y #ks-tutorial .kst-next:active { transform:translateY(2.5px); box-shadow:inset 0 0 0 var(--y-edge) var(--y-ink), 0 1.5px 0 var(--y-straw-lip); }
html.ml-ui-y .ksh-dot { background:var(--y-gold); box-shadow:0 0 0 2px var(--y-ink); }
html.ml-ui-y .ecp-retry, html.ml-ui-y .ec-catalog-actions button[data-ec="goal"], html.ml-ui-y #ks-tutorial .kst-skip, html.ml-ui-y .ks-guide-again {
  border:0; border-radius:14px; background:var(--y-cream); color:var(--y-ink); font-weight:800; text-shadow:none;
  box-shadow:inset 0 0 0 var(--y-edge) var(--y-ink), 0 3px 0 var(--y-lip); }
html.ml-ui-y .ec-catalog-actions button[aria-pressed="true"] { background:var(--y-best); }
html.ml-ui-y #mallangi-economy-home button:disabled:not(.ks-item):not(.ks-slot) { background:#EFE6DA; color:#8E6E56; text-shadow:none; box-shadow:inset 0 0 0 2px #CDB8A0, 0 3px 0 #E6D8C6; }
/* 상점: the sheet is the wall (a framed column on wide screens), its panels the HUD's boards */
html.ml-ui-y .ksm { background:var(--y-dim); }
html.ml-ui-y .ksm-sheet { background:linear-gradient(var(--y-wall-top), var(--y-wall-low)); }
@media (min-width:461px) { html.ml-ui-y .ksm-sheet { border-left:3px solid var(--y-ink); border-right:3px solid var(--y-ink); } }
html.ml-ui-y .ksm-head strong { color:var(--y-ink); font-weight:900; }
html.ml-ui-y .ksm-close { width:44px; height:44px; border:var(--y-edge) solid var(--y-ink); border-radius:14px; background:var(--y-cream); color:var(--y-ink); font:900 26px/1 var(--ml-sans); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .ksm-body { scrollbar-color:var(--y-pencil) var(--y-wall-top); }
html.ml-ui-y .ks-tabs button { border:var(--y-edge) solid #E3D2BD; border-radius:14px; background:var(--y-track); color:var(--y-ink); font-weight:800; box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .ks-tabs button[aria-selected=true] { border-color:transparent; background:var(--y-cream); font-weight:900; }
html.ml-ui-y .ks-tab-ink { border:var(--y-edge) solid var(--y-ink); border-radius:14px; box-shadow:inset 0 -4px 0 var(--y-straw); }
html.ml-ui-y .ks-use-rule, html.ml-ui-y .ks-use-rule strong, html.ml-ui-y .ks-rack-head span, html.ml-ui-y .ks-stage, html.ml-ui-y .ks-stage small,
html.ml-ui-y .ks-sub, html.ml-ui-y .ks-hint, html.ml-ui-y .ks-detail, html.ml-ui-y .ks-detail b, html.ml-ui-y .ks-detail span, html.ml-ui-y .ks-effect strong,
html.ml-ui-y .ks-unlock span, html.ml-ui-y .ks-done, html.ml-ui-y .ksm .ec-notice, html.ml-ui-y .ec-notice, html.ml-ui-y .ec-goal-copy > small, html.ml-ui-y .ec-prompt,
html.ml-ui-y .ec-next, html.ml-ui-y .ec-empty-shelf, html.ml-ui-y .ec-catalog small, html.ml-ui-y .ec-more, html.ml-ui-y .ec-complete { color:var(--y-ink); }
html.ml-ui-y .ks-rack { border:var(--y-edge) solid var(--y-ink); border-radius:22px; background:var(--y-cream); box-shadow:0 var(--y-lip-h) 0 var(--y-lip); }
html.ml-ui-y .ks-ring { border:3px solid var(--y-ink); background:var(--y-white); }
html.ml-ui-y .ks-empty .ks-ring { border:3px dashed var(--y-pencil); background:var(--y-cream); }
html.ml-ui-y .ks-slot-locked .ks-ring { border:3px solid var(--y-ink); background:var(--y-locked); }
html.ml-ui-y .ks-plus { color:var(--y-pencil); }
html.ml-ui-y .ks-target .ks-ring { box-shadow:0 0 0 4px var(--y-gold); }
html.ml-ui-y .ks-price, html.ml-ui-y .ks-item small.ks-price { background:var(--y-track); color:var(--y-ink); border-radius:999px; }
html.ml-ui-y .ks-item { border:2px solid var(--y-ink); border-radius:16px; background:var(--y-white); color:var(--y-ink); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .ks-item small { color:var(--y-ink); }
html.ml-ui-y .ks-item.ks-sel { border-color:var(--y-ink); box-shadow:0 3px 0 var(--y-lip), 0 0 0 3.5px var(--y-gold); }
html.ml-ui-y .ks-item.ks-next { border-style:dashed; border-color:var(--y-straw); }
html.ml-ui-y .ks-eq { background:var(--y-ink); color:var(--y-cream); }
html.ml-ui-y .ks-tag { background:#FFE3E8; color:var(--y-straw-ink); }
html.ml-ui-y .ks-detail, html.ml-ui-y .ks-unlock, html.ml-ui-y .ec-goal, html.ml-ui-y .ec-ready-alternative {
  border:var(--y-edge) solid var(--y-ink); border-radius:18px; background:var(--y-cream); box-shadow:0 var(--y-lip-h) 0 var(--y-lip); }
html.ml-ui-y .ks-detail .ks-effect { border-top:1.5px dashed var(--y-lip); }
html.ml-ui-y .ks-bubble { background:var(--y-ink); color:var(--y-cream); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .ec-shelf { border-bottom:6px solid var(--y-wood); box-shadow:0 2px 0 #D3AC7E; }
html.ml-ui-y .ec-catalog > div { background:transparent; border-bottom:1.5px dashed var(--y-lip); }
html.ml-ui-y .ec-error { background:#FFE3E8; color:var(--y-straw-ink); border-radius:14px; }
/* toast under the paused menu */
html.ml-ui-y #mallangi-economy-abandon { border:2px solid var(--y-ink); border-radius:12px; background:var(--y-cream); color:var(--y-ink); font-weight:700; box-shadow:0 3px 0 var(--y-lip); }
/* tutorial: the same dim; the lit hole keeps its rounded shape (the dim fills the ring box's corners) and a strawberry ring */
html.ml-ui-y #ks-tutorial { font-family:var(--ml-sans); }
html.ml-ui-y #ks-tutorial .kst-block { background:var(--y-dim); }
html.ml-ui-y #ks-tutorial .kst-ring, html.ml-ui-y #ks-tutorial.kst-tap .kst-ring { border-radius:0; overflow:hidden; box-shadow:none; animation:none; }
html.ml-ui-y #ks-tutorial .kst-ring::before { content:""; position:absolute; inset:0; border-radius:14px; box-shadow:0 0 0 40px var(--y-dim); }
html.ml-ui-y #ks-tutorial .kst-ring::after { content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 3.5px var(--y-straw), inset 0 0 0 6px rgba(255,248,236,.9); }
html.ml-ui-y #ks-tutorial.kst-tap .kst-ring::after { animation:y-kst-pulse 1.1s ease-in-out infinite; }
@keyframes y-kst-pulse { 50% { box-shadow:inset 0 0 0 5px var(--y-straw), inset 0 0 0 9px rgba(255,248,236,.9); } }
html.ml-ui-y #ks-tutorial .kst-bubble { border:3px solid var(--y-ink); border-radius:20px; background:var(--y-cream); color:var(--y-ink); font-weight:600; box-shadow:0 var(--y-lip-h) 0 var(--y-lip); }
html.ml-ui-y #ks-tutorial .kst-text b { color:var(--y-straw-ink); font-weight:800; }
html.ml-ui-y #ks-tutorial .kst-count { color:var(--y-ink); }
/* 일지 · 코인 정산 · 주간 1위: the cream card with the cocoa edge and the tan lip; the ribbon a jelly tag (strawberry; gold for coins) */
html.ml-ui-y #ec-quest-pop, html.ml-ui-y #ec-coin-pop, html.ml-ui-y #ec-weekly-popup { background:var(--y-dim); }
html.ml-ui-y .eqp-card, html.ml-ui-y .ecp-card, html.ml-ui-y .ec-weekly-card { border:3px solid var(--y-ink); border-radius:26px; background:var(--y-cream); box-shadow:0 5px 0 var(--y-lip); }
html.ml-ui-y .eqp-ribbon { border:3px solid var(--y-ink); border-radius:16px; background:var(--y-straw); color:#fff; box-shadow:0 4px 0 var(--y-straw-lip); text-shadow:0 2px 0 var(--y-straw-lip); }
html.ml-ui-y .ecp-ribbon { border:3px solid var(--y-ink); border-radius:16px; background:var(--y-coin); color:var(--y-ink); box-shadow:0 4px 0 var(--y-gold-lip); text-shadow:none; }
html.ml-ui-y .eqp-x { width:40px; height:40px; border:var(--y-edge) solid var(--y-ink); border-radius:13px; background:var(--y-cream); color:var(--y-ink); font:900 24px/1 var(--ml-sans); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .eqp-x:active { transform:translateY(1.5px); box-shadow:0 1.5px 0 var(--y-lip); }
html.ml-ui-y .eqp-sub { color:var(--y-ink); }
html.ml-ui-y .eqp-left b { background:var(--y-ink); color:var(--y-cream); }
html.ml-ui-y .eqp-q { border:2px solid var(--y-ink); background:var(--y-white); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .eqp-q.eqp-ready { border-color:var(--y-ink); box-shadow:0 3px 0 var(--y-lip), 0 0 0 3.5px var(--y-gold); }
html.ml-ui-y .eqp-q.eqp-done { border-color:var(--y-ink); background:var(--y-track); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .eqp-art { background:var(--y-track); }
html.ml-ui-y .eqp-done .eqp-art { background:#EADCCB; }
html.ml-ui-y .eqp-bar { box-sizing:border-box; height:20px; border:2px solid var(--y-ink); background:var(--y-track); box-shadow:none; }
html.ml-ui-y .eqp-bar i { background:var(--y-pink); }
html.ml-ui-y .eqp-done .eqp-bar i { background:var(--y-gold); }
html.ml-ui-y .eqp-bar em { line-height:16px; color:var(--y-ink); text-shadow:none; }
html.ml-ui-y .eqp-coin { background:var(--y-ink); color:var(--y-cream); }
html.ml-ui-y .eqp-claim { background:var(--y-coin); color:var(--y-ink); box-shadow:inset 0 0 0 2px var(--y-ink), 0 3px 0 var(--y-gold-lip); animation-name:y-claim-pulse; }
html.ml-ui-y .eqp-claim:active { transform:translateY(2px); box-shadow:inset 0 0 0 2px var(--y-ink), 0 1px 0 var(--y-gold-lip); }
@keyframes y-claim-pulse { 50% { transform:scale(1.06); box-shadow:inset 0 0 0 2px var(--y-ink), 0 3px 0 var(--y-gold-lip), 0 0 0 5px rgba(255,201,60,.4); } }
html.ml-ui-y .eqp-stamp { border-color:var(--y-straw-ink); background:rgba(255,248,236,.92); color:var(--y-straw-ink); box-shadow:none; }
html.ml-ui-y .eqp-att { border:2px solid var(--y-ink); background:var(--y-white); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .eqp-dots li { background:var(--y-track); color:var(--y-ink); box-shadow:inset 0 0 0 2px var(--y-lip); }
html.ml-ui-y .eqp-dots li span, html.ml-ui-y .eqp-dots li small, html.ml-ui-y .eqp-dots li.eqp-today:not(.eqp-on) small { color:var(--y-ink); }
html.ml-ui-y .eqp-dots li.eqp-on { background:var(--y-straw); color:#fff; text-shadow:none; box-shadow:inset 0 0 0 2px var(--y-ink); }
html.ml-ui-y .eqp-dots li.eqp-on span { color:#fff; }
html.ml-ui-y .eqp-dots li.eqp-today, html.ml-ui-y .eqp-dots li.eqp-on.eqp-today { box-shadow:inset 0 0 0 2px var(--y-ink), 0 0 0 3px var(--y-gold); }
html.ml-ui-y .eqp-att-ready .eqp-dots li.eqp-today { animation-name:y-today-pulse; }
@keyframes y-today-pulse { 50% { box-shadow:inset 0 0 0 2px var(--y-ink), 0 0 0 6px rgba(255,201,60,.55); } }
html.ml-ui-y .eqp-wallet, html.ml-ui-y .eqp-wallet b { color:var(--y-ink); }
html.ml-ui-y .ecp-sale b { color:var(--y-ink); text-shadow:0 2.5px 0 var(--y-lip); }
html.ml-ui-y .ecp-arrow i { border-top-color:var(--y-ink); }
html.ml-ui-y .ecp-coins { background:var(--y-ink); color:var(--y-coin); }
html.ml-ui-y .ecp-coins small { color:var(--y-cream); }
html.ml-ui-y .ecp-bonus li, html.ml-ui-y .ec-weekly-line { border:2px solid var(--y-ink); background:var(--y-white); box-shadow:0 3px 0 var(--y-lip); }
html.ml-ui-y .ecp-bonus li b, html.ml-ui-y .ec-weekly-line b, html.ml-ui-y .ec-weekly-total, html.ml-ui-y .ec-weekly-total b, html.ml-ui-y .ec-weekly-rule,
html.ml-ui-y .ecp-total span, html.ml-ui-y .ecp-total b, html.ml-ui-y .ecp-wallet span:first-child, html.ml-ui-y .ecp-wallet b, html.ml-ui-y .ecp-balance, html.ml-ui-y .ecp-backup, html.ml-ui-y .ecp-stay, html.ml-ui-y .ecp-msg { color:var(--y-ink); }
html.ml-ui-y .ecp-total, html.ml-ui-y .ecp-wallet { border:var(--y-edge) solid var(--y-ink); background:var(--y-best); box-shadow:0 3px 0 var(--y-gold-lip); }
html.ml-ui-y .ecp-refill, html.ml-ui-y .ec-weekly-title { color:var(--y-straw-ink); }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n+1) { background:var(--y-gold) !important; }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n+2) { background:var(--y-straw) !important; }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n+3) { background:var(--y-mint) !important; }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n+4) { background:var(--y-pink) !important; }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n+5) { background:var(--y-white) !important; }
html.ml-ui-y .ec-weekly-confetti i:nth-child(6n) { background:var(--y-mint-deep) !important; }
html.ml-ui-y #mallangi-economy-home button:focus-visible, html.ml-ui-y #mallangi-economy-home summary:focus-visible, html.ml-ui-y #ec-quest-pop button:focus-visible,
html.ml-ui-y #ec-coin-pop button:focus-visible, html.ml-ui-y #ks-tutorial button:focus-visible { outline-color:var(--y-straw-ink); }
html.ml-ui-y .eqp-claim:disabled { animation:none; }
@media (prefers-reduced-motion: reduce) { html.ml-ui-y #ks-tutorial.kst-tap .kst-ring::after, html.ml-ui-y .eqp-claim, html.ml-ui-y .eqp-att-ready .eqp-dots li.eqp-today { animation:none; } }

/* ---- HOME-17 (user requests 2026-10-27; board work/background-drafts-2026-10-22/home17). Same tone as above: cream faces,
   cocoa edge, tan lip; strawberry = primary / picked; the rarity dots: mint = 보통, lilac = 희귀, amber = 아주 희귀. ---- */
html.ml-ui-y:not(.ec-menu-visible) #mallangi-economy-home .ec-journal, html.ml-ui-y.ksm-open #mallangi-economy-home .ec-journal { display:none; }
html.ml-ui-y #mallangi-economy-home .ksh-slots:active { transform:translateY(2px); box-shadow:0 1.5px 0 var(--y-lip); }
.ec-r-common { --ec-r:#86C7BA; } .ec-r-rare { --ec-r:#A98BDF; } .ec-r-epic { --ec-r:#F0A23B; }
.ec-acc-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--ec-r, #D9BFA0); box-shadow:0 0 0 1.5px #8B5E3C; flex:none; }
/* request 1: the mode popup (the 일지 skin) with two option cards */
#ec-mode-pop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:28px 12px 20px; box-sizing:border-box; background:rgba(43, 26, 15, .4); overflow-y:auto;
  font-family:var(--ml-sans, "Mallangi Sans", sans-serif); color:#8B5E3C; animation:eqp-fade .18s ease-out; -webkit-tap-highlight-color:transparent; }
.emp-card { width:min(380px, 100%); padding:34px 14px 16px; }
.emp-opts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.emp-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:176px; margin:0; padding:16px 10px 14px; border:2px solid #8B5E3C; border-radius:18px;
  background:#FFFFFF; color:#8B5E3C; font:inherit; text-align:center; cursor:pointer; box-shadow:0 3px 0 #D9BFA0; }
.emp-opt:active { transform:translateY(2px); box-shadow:0 1px 0 #D9BFA0; }
.emp-opt.emp-on { border-color:#E05A74; box-shadow:0 0 0 2.5px #E05A74, 0 3px 0 #B8475E; background:#FFF8EC; }
.emp-art { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:#F5EADD; }
.emp-on .emp-art { background:#FFE3E8; }
.emp-art svg { display:block; width:56px; height:56px; }
.emp-opt strong { font-size:20px; font-weight:900; line-height:1.1; }
.emp-text { font-size:13px; font-weight:700; line-height:1.4; word-break:keep-all; }
.emp-check { position:absolute; top:-9px; right:-9px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#E05A74; box-shadow:0 0 0 2.5px #8B5E3C; }
.emp-check svg { display:block; width:18px; height:18px; }
/* the dock card's label pops after a change (Web Animations in mallangi-economy.js) */
html.ml-ui-y #mallangi-economy-home .ec-mode span, html.ml-ui-y #mallangi-economy-home .ec-mode svg { transform-origin:50% 60%; }
/* request 2/14: the 일지 holds the day's set (normally three cards; the update day may show a fourth already earned) */
.eqp-cards { grid-template-columns:repeat(var(--eqp-n, 3), minmax(0, 1fr)); }
.eqp-art-sling svg { display:block; width:46px; height:46px; }
.eqp-att { padding-bottom:12px; }
.eqp-att-rule { margin:20px 0 0; font-size:12px; font-weight:700; text-align:center; color:#8B5E3C; word-break:keep-all; }
/* request 12: 메인 메뉴로 (cream) beside 확인 (strawberry) under the coin settlement */
.ecp-actions { display:flex; gap:8px; margin-top:12px; }
.ecp-actions .ecp-ok, .ecp-actions .ecp-home { flex:1; width:auto; min-height:48px; margin:0; }
.ecp-home { border:0; border-radius:14px; background:#FFF8EC; color:#8B5E3C; font:inherit; font-size:16px; font-weight:800; cursor:pointer; box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 3px 0 #D9BFA0; }
.ecp-home:active { transform:translateY(2px); box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 1px 0 #D9BFA0; }
/* request 7: 상점 → 꾸미기 = head accessories */
.ec-gacha-top { display:flex; align-items:center; gap:14px; padding:14px 14px 16px; border:2.5px solid #8B5E3C; border-radius:22px; background:#FFF8EC; box-shadow:0 4px 0 #D9BFA0; }
.ec-machine { display:block; flex:none; width:min(118px, 30vw); height:auto; }
.ec-gacha-copy { display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
.ec-gacha-copy strong { font-size:18px; font-weight:900; line-height:1.2; }
.ec-gacha-copy > span { font-size:13px; font-weight:600; line-height:1.5; word-break:keep-all; }
.ec-gacha-draw { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:52px; margin-top:2px; padding:0 12px; border:0; border-radius:16px;
  background:#E05A74; color:#FFFFFF; font:inherit; font-size:17px; font-weight:900; cursor:pointer; text-shadow:0 1.5px 0 #B8475E; box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 4px 0 #B8475E; }
.ec-gacha-draw:active { transform:translateY(2.5px); box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 1.5px 0 #B8475E; }
.ec-gacha-draw i { width:20px; height:20px; border-radius:50%; flex:none; background:radial-gradient(circle closest-side, #E3AE3C 0 45%, #FFD86B 49% 100%); box-shadow:inset 0 0 0 1.5px #8B5E3C; }
.ec-gacha-draw:disabled i { opacity:.55; }
.ec-gacha-short { font-size:13px; font-weight:800; color:#B23652; text-align:center; }
.ec-odds { margin:14px 2px 0; }
.ec-odds summary { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:12px; background:#FFF8EC; font-size:14px; font-weight:800; cursor:pointer;
  box-shadow:inset 0 0 0 2px #8B5E3C, 0 2px 0 #D9BFA0; list-style:none; }
.ec-odds summary::-webkit-details-marker { display:none; }
.ec-odds summary::after { content:""; width:7px; height:7px; margin-left:8px; border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.ec-odds[open] summary::after { transform:translateY(2px) rotate(-135deg); }
.ec-odds ul { list-style:none; margin:10px 0 0; padding:10px 12px; border:2px solid #8B5E3C; border-radius:14px; background:#FFFFFF; display:grid; gap:6px; }
.ec-odds-rarity { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ec-odds-items { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:14px; }
.ec-odds li { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; min-width:0; }
.ec-odds li span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ec-odds-rarity li b { font-weight:900; } .ec-odds-rarity li span { flex:none; }
.ec-odds li b { font-variant-numeric:tabular-nums; }
.ec-coll-head { display:flex; align-items:center; justify-content:space-between; margin:18px 4px 10px; font-size:16px; font-weight:900; }
.ec-coll-head b { font-size:14px; font-weight:800; padding:2px 10px; border-radius:999px; background:#F5EADD; }
.ec-coll { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:9px; }
.ec-acc { position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-width:0; min-height:96px; margin:0; padding:9px 3px 8px;
  border:2px solid #8B5E3C; border-radius:16px; background:#FFFFFF; color:#8B5E3C; font:inherit; box-shadow:0 3px 0 #D9BFA0; }
button.ec-acc { cursor:pointer; }
button.ec-acc:active { transform:translateY(2px); box-shadow:0 1px 0 #D9BFA0; }
.ec-acc.ec-on { background:#FFE08A; box-shadow:0 0 0 2.5px #E05A74, 0 3px 0 #D9A93A; }
.ec-acc-icon { display:grid; place-items:center; width:44px; height:44px; }
.ec-acc-icon > svg.ec-acc-wait { width:34px; height:34px; }
.ec-acc-icon > canvas { display:block; }
.ec-acc-name { display:block; max-width:100%; font-size:11.5px; font-weight:800; line-height:1.25; text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
.ec-acc .ec-acc-dot { position:absolute; top:6px; left:6px; width:8px; height:8px; }
.ec-acc-check { position:absolute; top:-8px; right:-8px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#E05A74; box-shadow:0 0 0 2px #8B5E3C; }
.ec-acc-check svg { display:block; width:15px; height:15px; }
.ec-acc.ec-unknown { background:#F5EADD; border-style:dashed; border-color:#B8957A; box-shadow:none; }
.ec-acc-q { display:grid; place-items:center; width:40px; height:40px; margin:2px 0; border-radius:50% 50% 44% 44%; background:#E7DED4; color:#B8957A; font-size:22px; font-weight:900; line-height:1; }
.ec-unknown .ec-acc-name { color:#9C7A60; font-weight:700; }
@media (max-width:360px) { .ec-coll { gap:7px; } .ec-acc-name { font-size:10.5px; } .ec-gacha-top { gap:10px; padding:12px; } }
/* the draw (knob 0.5 s → capsule drop 0.4 s → open 0.35 s → card) and the poke gift share one card */
.ecg-pop { position:fixed; inset:0; z-index:2147483200; display:grid; place-items:center; padding:28px 12px 20px; box-sizing:border-box; background:rgba(43, 26, 15, .45); overflow-y:auto;
  font-family:var(--ml-sans, "Mallangi Sans", sans-serif); color:#8B5E3C; animation:eqp-fade .18s ease-out; -webkit-tap-highlight-color:transparent; }
.ecg-stage { position:relative; width:min(210px, 60vw); outline:none; }
.ecg-machine { display:block; width:100%; height:auto; }
.ecg-turn .ecm-knob { transform-box:fill-box; transform-origin:50% 50%; animation:ecg-knob .5s cubic-bezier(.45, 0, .3, 1) both; }
.ecg-capsule { position:absolute; left:64.5%; top:73%; width:16%; aspect-ratio:1; opacity:0; }
.ecg-capsule i { position:absolute; left:0; right:0; height:50%; box-sizing:border-box; border:2.5px solid #8B5E3C; }
.ecg-cap-top { top:0; border-radius:999px 999px 0 0; background:var(--ec-r, #A8DCD1); border-bottom-width:1.25px !important; }
.ecg-cap-bottom { bottom:0; border-radius:0 0 999px 999px; background:#FFFFFF; border-top-width:1.25px !important; }
.ecg-drop .ecg-capsule { animation:ecg-drop .4s cubic-bezier(.3, .7, .4, 1) both; }
.ecg-open .ecg-capsule { opacity:1; transform:translateY(64%) ; animation:none; }
.ecg-open .ecg-cap-top { animation:ecg-top .35s ease-out both; }
.ecg-open .ecg-cap-bottom { animation:ecg-bottom .35s ease-out both; }
.ecg-sparks { position:absolute; left:72.5%; top:86%; width:0; height:0; }
.ecg-sparks i { position:absolute; left:-5px; top:-5px; width:10px; height:10px; opacity:0; background:#FFFFFF; clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ecg-sparks i:nth-child(odd) { background:#FFD86B; }
.ecg-open .ecg-sparks i { animation:ecg-spark .35s ease-out both; }
.ecg-sparks i:nth-child(1) { --sx:-46px; --sy:-38px; } .ecg-sparks i:nth-child(2) { --sx:0px; --sy:-56px; } .ecg-sparks i:nth-child(3) { --sx:46px; --sy:-38px; } .ecg-sparks i:nth-child(4) { --sx:58px; --sy:4px; }
.ecg-sparks i:nth-child(5) { --sx:40px; --sy:40px; } .ecg-sparks i:nth-child(6) { --sx:-40px; --sy:40px; } .ecg-sparks i:nth-child(7) { --sx:-58px; --sy:4px; } .ecg-sparks i:nth-child(8) { --sx:16px; --sy:-30px; }
@keyframes ecg-knob { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes ecg-drop { 0% { opacity:1; transform:translateY(0) scale(.7); } 55% { transform:translateY(64%) scale(1); } 75% { transform:translateY(36%) scale(1.02); } 100% { opacity:1; transform:translateY(64%) scale(1); } }
@keyframes ecg-top { to { transform:translate(-30%, -150%) rotate(-38deg); opacity:0; } }
@keyframes ecg-bottom { to { transform:translate(20%, 60%) rotate(18deg); opacity:0; } }
@keyframes ecg-spark { 0% { opacity:1; transform:translate(0, 0) scale(.4); } 100% { opacity:0; transform:translate(var(--sx), var(--sy)) scale(1.3); } }
.ecg-play:not(.ecg-revealed) .ecg-card, .ecg-revealed .ecg-stage { display:none; }
.ecg-card { position:relative; box-sizing:border-box; width:min(320px, 100%); margin-top:16px; padding:36px 18px 18px; border:3px solid #8B5E3C; border-radius:26px; background:#FFF8EC;
  box-shadow:0 5px 0 #D9BFA0; text-align:center; animation:eqp-pop .32s cubic-bezier(.2, 1.5, .45, 1); }
.ecg-card > .eqp-ribbon { position:absolute; left:50%; top:-22px; transform:translateX(-50%); padding:9px 26px 10px; border:3px solid #8B5E3C; border-radius:16px; background:#E05A74; color:#FFFFFF;
  font-size:20px; font-weight:900; white-space:nowrap; box-shadow:0 4px 0 #B8475E; text-shadow:0 2px 0 #B8475E; }
.ecg-title { margin:0 0 8px; font-size:16px; font-weight:900; color:#B23652; word-break:keep-all; }
.ecg-show { position:relative; display:grid; place-items:center; width:132px; height:132px; margin:4px auto 8px; border-radius:50%;
  background:radial-gradient(circle closest-side, #FFFFFF 0 55%, color-mix(in srgb, var(--ec-r, #A8DCD1) 45%, #FFFFFF) 56% 100%); box-shadow:0 0 0 2.5px #8B5E3C; }
.ecg-icon { display:grid; place-items:center; width:96px; height:96px; }
.ecg-icon > svg.ec-acc-wait { width:64px; height:64px; }
.ecg-icon > canvas { display:block; }
.ecg-rarity { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; background:#FFFFFF; font-size:13px; font-weight:800; box-shadow:inset 0 0 0 2px #8B5E3C; }
.ecg-name { display:block; margin:8px 0 2px; font-size:22px; font-weight:900; line-height:1.2; }
.ecg-msg { margin:0; font-size:14px; font-weight:700; }
.ecg-actions { display:flex; gap:8px; margin-top:16px; }
.ecg-actions button { flex:1; min-height:48px; margin:0; border:0; border-radius:14px; font:inherit; font-size:16px; font-weight:900; cursor:pointer; }
.ecg-try, .ecg-actions .ecg-ok:only-child { background:#E05A74; color:#FFFFFF; text-shadow:0 1.5px 0 #B8475E; box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 4px 0 #B8475E; }
.ecg-ok { background:#FFF8EC; color:#8B5E3C; box-shadow:inset 0 0 0 2.5px #8B5E3C, 0 3px 0 #D9BFA0; }
.ecg-actions button:active { transform:translateY(2px); }
/* the one-time decoration refund note (tap to dismiss) */
#ec-toast { position:fixed; z-index:70; left:50%; top:calc(max(calc(38 * var(--y-u, 1px)), env(safe-area-inset-top)) + 58px); transform:translateX(-50%); box-sizing:border-box; width:min(360px, calc(100vw - 24px));
  padding:12px 16px; border:2.5px solid #8B5E3C; border-radius:16px; background:#FFF8EC; color:#8B5E3C; box-shadow:0 4px 0 #D9BFA0; font:800 14px/1.45 var(--ml-sans, "Mallangi Sans", sans-serif);
  text-align:center; word-break:keep-all; cursor:pointer; animation:eqp-pop .32s cubic-bezier(.2, 1.5, .45, 1); }
#ec-toast[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) {
  #ec-mode-pop, .ecg-pop, .ecg-card, #ec-toast { animation:none; }
  .emp-opt:active, button.ec-acc:active, .ec-gacha-draw:active, .ecg-actions button:active, .ecp-home:active { transform:none; }
}