/* ==========================================================
pages/doll.css — 마법인형 합성 시뮬레이터 /tools/doll (2026-10-15, docs/06-기획/21-마법인형-합성_plan.md)
시안 https://claude.ai/artifact/9hgDWLzTm8oR3oGjk5R3CB (10차 승인). 뷰 app/Views/tools/doll.php · JS public/js/pages/doll.js
- 사이트 부분은 dl-, 게임 창(공식 가이드북 합성창 모양)은 dg- 접두사 — 사이트 공통 클래스(.btn·.chip·.card)와 부딪치지 않게
- 색은 모두 아래 .dl 지역 토큰 — 사이트 부분은 기존 토큰(v3·v4 둘 다 있는 이름)에 v4 값을 먼저 잇고,
게임 창은 테마와 상관없이 늘 어두운 돌판이라 실제 값을 둔다 (게이트 check-design-tokens: 지역 토큰 선언은 허용)
========================================================== */
.dl {
--dl-sf: var(--bg-surface);
--dl-sf2: var(--ui-surface-2, var(--bg-elevated));
--dl-sf3: var(--ui-surface-3, var(--bg-hover));
--dl-line: var(--ui-line, var(--border-primary));
--dl-line2: var(--ui-line-2, var(--border-secondary));
--dl-t1: var(--text-primary);
--dl-t2: var(--text-secondary);
--dl-t3: var(--text-tertiary);
--dl-ac: var(--color-accent);
--dl-ac-strong: var(--ui-accent-strong, var(--color-accent-hover));
--dl-ac-weak: var(--ui-accent-weak, var(--color-accent-bg));
--dl-ac-fill: var(--ui-accent-fill, var(--color-accent));
--dl-on-ac: var(--text-on-accent);
--dl-up: var(--color-up);
--dl-down: var(--color-down);
--dl-up-weak: var(--ui-up-weak, var(--color-up-bg));
--dl-tier1: var(--ui-tier-4, var(--color-accent-bg));
--dl-tier1-t: var(--ui-tier-4-t, var(--color-accent));
--dl-tier2: var(--ui-tier-2, var(--color-accent));
--dl-tier2-t: var(--ui-tier-2-t, var(--text-on-accent));
--dl-tier3: var(--ui-tier-1, var(--text-primary));
--dl-tier3-t: var(--ui-tier-1-t, var(--bg-surface));
--dl-r: var(--ui-r, var(--radius-sm));
--dl-pad: var(--ui-pad-x, 16px);
--dl-scrim: rgba(10, 12, 17, .55);
--dl-pop: 0 10px 30px rgba(14, 19, 32, .3);
--dl-knob: #fff;
--dl-knob-shadow: 0 1px 2px rgba(0, 0, 0, .25);
--dl-seg-shadow: 0 1px 2px rgba(0, 0, 0, .08);
/* 게임 창 — 늘 어둡다 */
--g-stone: #2a2b2e; --g-stone-2: #1c1d20; --g-backdrop: #1d1d20; --g-bar-1: #3a3b3e; --g-bar-2: #232427;
--g-silver: #c9cdd3; --g-silver-dim: rgba(201, 205, 211, .55); --g-silver-line: rgba(201, 205, 211, .25);
--g-gold-1: #e3bd62; --g-gold-2: #8a5f1c; --g-gold-3: #3b2708; --g-gold-4: #c9a24c; --g-gold-5: #6b4814; --g-gold-6: #fff3c4; --g-gold-7: #5a3c10;
--g-check: #f3cf3e; --g-cell: #101113; --g-cell-line: #3a3b3f; --g-slot: #0d0d0f; --g-slot-line: #55565a; --g-close: #3c3d40;
--g-text: #e9e6dc; --g-text-2: #d8d4ca; --g-mute: #a7a39a; --g-white: #f1f1f1; --g-dim: #6b6b6b; --g-glyph: #bdbdbd; --g-ic: #a9a9a9;
--g-yellow: #ffe08a; --g-yellow-2: #ffe9a8; --g-glow: rgba(246, 211, 107, .8); --g-glow-weak: rgba(246, 211, 107, .25);
--g-ok: #f6d36b; --g-reg-1: #1d6b45; --g-reg-2: #0f3b26; --g-orb-1: #9be38a; --g-orb-2: #2c7d2b; --g-orb-3: #123d12; --g-orb-glow: #7fe36a;
--g-label-1: #4a4b4f; --g-label-2: #2b2c2f; --g-btn-1: #55565a; --g-btn-2: #2c2d30;
--g-navy-1: #3e5b80; --g-navy-2: #1e3350; --g-navy-line: #6f8db3; --g-navy-text: #f0f4ff;
--g-pri-1: #6a5220; --g-pri-2: #3b2a08;
--g-back: #45464a; --g-back-line: #6a6b70; --g-back-in: #1a1a1c; --g-back-hover: #a9aab0;
--g-msg: rgba(0, 0, 0, .72); --g-sys: #9fd4ff; --g-warn: #ff9a9a; --g-short: #ff7d7d; --g-ok-text: #8fe0a8; --g-scroll: #8a6a2a; --g-scroll-track: #111;
--g-tip: rgba(12, 12, 14, .95); --g-tip-text: #eee; --g-tip-mute: #b8b8b8;
--g-shadow: 0 6px 18px rgba(0, 0, 0, .55); --g-hi: rgba(255, 255, 255, .06); --g-hi-2: rgba(255, 255, 255, .18); --g-hi-3: rgba(255, 255, 255, .25);
--g-shade: rgba(0, 0, 0, .18); --g-shade-2: rgba(0, 0, 0, .28); --g-shade-3: rgba(0, 0, 0, .35); --g-shade-4: rgba(0, 0, 0, .45); --g-shade-5: rgba(0, 0, 0, .6);
--g-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
}
.dl-srv { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--text-secondary); }
.dl-srv select { height: 36px; padding: 0 10px; border: 1px solid var(--border-secondary); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font: inherit; }
.dl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 8px; align-items: start; }
.dl :focus-visible { outline: none; background-color: var(--dl-ac-weak); }
.dl-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-im { image-rendering: pixelated; flex: none; }
.dl-card { background: var(--dl-sf); border: 1px solid var(--dl-line); border-radius: var(--dl-r); min-width: 0; }
.dl-card__hd { display: flex; align-items: center; gap: 8px; height: 48px; margin: 0; padding: 0 var(--dl-pad); border-bottom: 1px solid var(--dl-line); font-size: var(--fs-14); font-weight: 600; }
.dl-card__hd small { margin-left: auto; font-weight: 400; font-size: var(--fs-12); color: var(--dl-t3); }
.dl-card__bd { padding: 14px var(--dl-pad); }
.dl-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: calc(var(--ui-stick-h, 0px) + 8px); max-height: calc(100vh - var(--ui-stick-h, 0px) - 16px); overflow-y: auto; scrollbar-width: thin; } /* 가운데가 훨씬 길다 — 늘리면 큰 빈 카드가 되어 따라 붙게 둔다 */
.dl-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-tools { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.dl-tool { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--dl-r); color: var(--dl-t2); text-decoration: none; }
.dl-tool:hover { background: var(--dl-sf2); }
.dl-tool > i { width: 30px; height: 30px; border-radius: var(--dl-r); background: var(--dl-sf3); display: grid; place-items: center; color: var(--dl-t3); flex: none; font-size: var(--fs-16); }
.dl-tool b { display: block; color: var(--dl-t1); font-weight: 500; font-size: var(--fs-13); }
.dl-tool span { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-tool.is-on { background: var(--dl-ac-weak); }
.dl-tool.is-on > i { background: var(--dl-ac); color: var(--dl-on-ac); }
.dl-rules { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dl-rules li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: var(--fs-13); line-height: 21px; color: var(--dl-t2); }
.dl-rules li .dl-ico { margin-top: 3px; color: var(--dl-ac); }
.dl-rules b { color: var(--dl-t1); font-weight: 600; }
.dl-src { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--dl-line); font-size: var(--fs-12); color: var(--dl-t3); line-height: 19px; }
.dl-src a { color: var(--dl-ac); }
/* 핵심 수치 */
.dl-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl-fact { padding: 12px var(--dl-pad); border-right: 1px solid var(--dl-line); min-width: 0; }
.dl-fact:last-child { border-right: 0; }
.dl-fact dt { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-fact dd { margin: 4px 0 0; font-size: var(--fs-18); font-weight: 700; white-space: nowrap; }
.dl-fact dd small { display: block; margin-top: 2px; font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); white-space: normal; }
/* 탭·단추·칩 */
.dl-simhd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px var(--dl-pad); border-bottom: 1px solid var(--dl-line); }
.dl-simhd p { margin: 0; color: var(--dl-t3); font-size: var(--fs-12); }
.dl-seg { display: inline-flex; background: var(--dl-sf3); border-radius: var(--dl-r); padding: 3px; gap: 2px; flex-wrap: wrap; }
.dl-seg button { border: 0; background: transparent; height: 34px; padding: 0 14px; border-radius: var(--radius-sm); color: var(--dl-t2); font-size: var(--fs-14); cursor: pointer; }
.dl-seg button[aria-selected="true"], .dl-seg button[aria-checked="true"] { background: var(--dl-sf); color: var(--dl-t1); font-weight: 600; box-shadow: var(--dl-seg-shadow); }
.dl-seg--sm button { height: 32px; padding: 0 12px; font-size: var(--fs-13); }
.dl-btn { height: 36px; padding: 0 14px; border-radius: var(--dl-r); border: 1px solid var(--dl-line2); background: var(--dl-sf); color: var(--dl-t1); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-13); cursor: pointer; }
.dl-btn:hover:not(:disabled) { background: var(--dl-sf2); }
.dl-btn--pri { background: var(--dl-ac-fill); border-color: var(--dl-ac-fill); color: var(--dl-on-ac); font-weight: 600; }
.dl-btn--pri:hover:not(:disabled) { background: var(--dl-ac-strong); }
.dl-btn--ghost { height: 30px; border-color: transparent; background: transparent; color: var(--dl-t3); }
.dl-btn--ghost:hover:not(:disabled) { color: var(--dl-t1); }
.dl-btn--sm { height: 32px; padding: 0 12px; }
.dl-btn:disabled { opacity: .45; cursor: default; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-chip { height: 30px; padding: 0 10px; border-radius: var(--dl-r); border: 1px solid var(--dl-line2); background: var(--dl-sf); color: var(--dl-t1); font-size: var(--fs-12); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.dl-chip[aria-pressed="true"] { background: var(--dl-ac-weak); border-color: transparent; color: var(--dl-ac-strong); font-weight: 600; }
.dl-chip .dl-im { width: 18px; height: 18px; }
.dl-note { font-size: var(--fs-12); color: var(--dl-t3); line-height: 18px; margin: 0; }
.dl select, .dl input[type="number"] { height: 36px; border: 1px solid var(--dl-line2); border-radius: var(--dl-r); background: var(--dl-sf); color: var(--dl-t1); padding: 0 10px; font: inherit; }
.dl-pane { padding: 14px var(--dl-pad); display: flex; flex-direction: column; gap: 12px; }
/* 상점 */
.dl-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dl-shop__box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--dl-r); background: var(--dl-sf2); min-width: 0; }
.dl-shop__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.dl-shop__who { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: var(--fs-14); }
.dl-shop__unit { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-shop__ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.dl-shop__ctl select { width: 100%; }
.dl-shop__ctl .dl-btn { min-width: 72px; }
.dl-shop__cost { margin: 0; font-size: var(--fs-12); color: var(--dl-t3); min-height: 18px; }
.dl-shop__cost b { color: var(--dl-t1); font-weight: 600; }
.dl-shop__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dl-shop__hint { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-shop__hint b { color: var(--dl-t2); }
/* ── 게임 창 ── */
.dg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: var(--dl-r); color: var(--g-text);
background: var(--g-backdrop) url("data:image/svg+xml;utf8,");
box-shadow: inset 0 0 0 1px #000, inset 0 0 40px var(--g-shade-5); }
.dg-win { padding: 5px; border-radius: var(--radius-sm); min-width: 0; background: repeating-linear-gradient(135deg, var(--g-gold-1) 0 2px, var(--g-gold-2) 2px 4px, var(--g-gold-3) 4px 5px); box-shadow: var(--g-shadow); }
.dg-win--inv { grid-column: 1 / -1; }
.dg-in { position: relative; height: 100%; display: flex; flex-direction: column; border: 1px solid #000;
background: var(--g-stone) url("data:image/svg+xml;utf8,"); }
.dg-close { position: absolute; top: 0; right: 0; z-index: 2; font: 700 var(--fs-11)/1 var(--g-serif); color: var(--g-white); padding: 5px 7px 6px 9px; background: var(--g-close); border: 0; border-bottom-left-radius: var(--radius-lg); border-left: 1px solid #000; border-bottom: 1px solid #000; }
button.dg-close { cursor: pointer; }
button.dg-close:hover { color: var(--g-yellow); }
.dg-orn { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; color: var(--g-silver-dim); pointer-events: none; }
.dg-in--result > .dg-orn, .dg-dlg__in .dg-orn { clip-path: inset(0 0 56% 0); }
.dg-orn-b { width: 80%; margin: 0 auto; display: block; color: var(--g-silver-dim); }
.dg-top { position: relative; min-height: 236px; display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px; border-bottom: 2px solid var(--g-scroll-track); box-shadow: inset 0 0 0 1px var(--g-hi); }
.dg-tier { position: relative; height: 34px; font: 700 var(--fs-24)/34px var(--g-serif); color: var(--g-white); letter-spacing: .06em; text-shadow: 1px 1px 0 #000, 0 0 8px var(--g-hi-3); }
.dg-q { position: relative; margin-top: 10px; width: 62px; height: 62px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--g-slot); border: 2px solid var(--g-slot-line); box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #000; }
.dg-q span { font: 700 var(--fs-32)/1 var(--g-serif); color: var(--g-gold-4); text-shadow: 1px 1px 0 #000; }
.dg-q em { position: absolute; right: 4px; bottom: 2px; font: 700 var(--fs-12)/1 inherit; font-style: normal; color: #fff; text-shadow: 1px 1px 0 #000; }
.dg-q.is-busy { animation: dg-charge 900ms ease-in-out; }
@keyframes dg-charge { 50% { box-shadow: inset 0 0 18px var(--g-glow), 0 0 22px var(--g-glow); } }
.dg-gems { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: auto; padding-top: 14px; }
.dg-gem { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--g-slot); border: 2px solid var(--g-slot-line); box-shadow: inset 0 0 0 2px #000; display: grid; place-items: center; }
.dg-gem svg { width: 60%; height: 60%; }
.dg-gem em { position: absolute; right: 3px; bottom: 1px; font: 700 var(--fs-11)/1 inherit; font-style: normal; color: #fff; text-shadow: 1px 1px 0 #000; }
.dg-gem.is-short em { color: var(--g-short); }
.dg-gem.is-empty svg { opacity: .18; }
.dg-reg { padding: 10px 12px 8px; background: var(--g-shade); }
.dg-label { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 14px 0 6px; border-radius: var(--radius-pill); font: 700 var(--fs-13)/1 var(--g-serif); color: var(--g-white); background: linear-gradient(var(--g-label-1), var(--g-label-2)); border: 1px solid #000; box-shadow: inset 0 1px 0 var(--g-hi-2); }
.dg-orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--g-orb-1), var(--g-orb-2) 60%, var(--g-orb-3)); box-shadow: 0 0 0 1px #000; }
.dg-orb.is-on { box-shadow: 0 0 0 1px #000, 0 0 8px var(--g-orb-glow); }
.dg-gridwrap, .dg-inv-frame { display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 8px; }
.dg-gridwrap { margin-top: 10px; }
.dg-grid, .dg-inv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--cs, 56px); padding: 4px; overflow-y: auto; scrollbar-width: none;
background: repeating-linear-gradient(135deg, var(--g-gold-4) 0 2px, var(--g-gold-5) 2px 4px); }
.dg-grid { height: calc(var(--cs, 56px) * 2 + 8px); }
.dg-inv { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); align-content: start; height: calc(var(--cs, 56px) * 4 + 8px); }
.dg-cell { position: relative; background: var(--g-cell); border: 1px solid var(--g-cell-line); display: grid; place-items: center; padding: 0; min-width: 0; color: inherit; }
.dg-cell .dl-im { width: 78%; height: auto; aspect-ratio: 1; }
button.dg-cell { cursor: pointer; }
button.dg-cell:hover { box-shadow: inset 0 0 0 1px var(--g-glow); }
.dg-cell.is-reg { background: radial-gradient(circle, var(--g-reg-1), var(--g-reg-2) 70%); }
.dg-cell.is-dim .dl-im, .dg-cell.is-dim > svg, .dg-cell.is-dim .dg-stack { opacity: .28; }
.dg-chk { position: absolute; top: 1px; right: 2px; width: 46%; height: auto; color: var(--g-check); filter: drop-shadow(1px 1px 0 #000); }
.dg-lk { position: absolute; left: 2px; bottom: 2px; color: var(--g-text-2); }
.dg-lk .dl-ico { width: 12px; height: 12px; }
.dg-stack { position: absolute; right: 3px; bottom: 1px; font: 700 var(--fs-11)/1 inherit; color: #fff; text-shadow: 1px 1px 0 #000; }
.dg-cell > svg { width: 62%; height: 62%; }
.dg-cell--bag { cursor: pointer; }
.dg-cell--bag > svg { width: 70%; height: 70%; }
.dg-bulk { position: absolute; left: 3px; right: 3px; bottom: 3px; display: none; height: 20px; padding: 0; border: 1px solid var(--g-gold-4); border-radius: var(--radius-xs); background: var(--g-tip); color: var(--g-yellow); font: 700 var(--fs-11)/18px inherit; white-space: nowrap; overflow: hidden; cursor: pointer; }
.dg-cell--bag:hover .dg-bulk, .dg-cell--bag:focus-within .dg-bulk { display: block; }
.dg-cell--bag:hover .dg-stack, .dg-cell--bag:focus-within .dg-stack { bottom: 25px; }
@media (hover: none) { .dg-bulk { display: block; } .dg-cell--bag .dg-stack { bottom: 25px; } }
.dg-cell.is-new { animation: dg-new 1.2s ease; }
@keyframes dg-new { 0% { box-shadow: inset 0 0 14px var(--g-glow); } 100% { box-shadow: none; } }
.dg-rod { width: 10px; justify-self: center; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--g-gold-5), var(--g-gold-1) 45%, var(--g-gold-2)); box-shadow: 0 0 0 1px #000; position: relative; }
.dg-rod::before, .dg-rod::after { content: ''; position: absolute; left: -3px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--g-gold-6), var(--g-gold-4) 45%, var(--g-gold-7)); box-shadow: 0 0 0 1px #000; }
.dg-rod::before { top: -4px; } .dg-rod::after { bottom: -4px; }
.dg-bar { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 8px; margin-top: auto; border-top: 2px solid var(--g-scroll-track); background: linear-gradient(var(--g-bar-1), var(--g-bar-2)); }
.dg-glyph { width: 26px; height: 26px; border: 0; background: transparent; font: 700 var(--fs-16)/1 var(--g-serif); color: var(--g-glyph); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.dg-glyph:hover { color: #fff; }
.dg-spacer { flex: 1; height: 24px; margin: 0 6px; background: var(--g-shade-4); border-radius: var(--radius-sm); }
.dg-cmd { height: 28px; padding: 0 10px; border: 0; background: transparent; font: 700 var(--fs-14)/1 var(--g-serif); color: var(--g-white); text-shadow: 1px 1px 0 #000; cursor: pointer; }
.dg-cmd:hover:not(:disabled) { color: var(--g-yellow-2); text-shadow: 0 0 8px var(--g-glow), 1px 1px 0 #000; }
.dg-cmd--start { border: 1px solid #000; border-radius: var(--radius-sm); background: linear-gradient(var(--g-btn-1), var(--g-btn-2)); box-shadow: inset 0 1px 0 var(--g-hi-2); }
.dg-cmd:disabled, .dg-cmd.is-idle { color: var(--g-dim); }
.dg-cmd:disabled { cursor: default; }
.dg-in--result { padding: 70px 14px 14px; }
.dg-res { position: relative; flex: 1; min-height: 250px; max-height: 320px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 10px;
border: 1px solid var(--g-silver-line); border-radius: var(--radius-sm); overflow-y: auto; background: var(--g-shade-2); scrollbar-width: thin; scrollbar-color: var(--g-scroll) var(--g-scroll-track); }
.dg-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 36px 12px; color: var(--g-text-2); font-size: var(--fs-13); text-align: center; line-height: 20px; text-shadow: 1px 1px 0 #000; }
.dg-empty svg { width: 46px; height: 46px; color: var(--g-stone); opacity: .7; }
.dg-empty b { color: var(--g-yellow); }
.dg-back { position: relative; aspect-ratio: 1; border: 2px solid var(--g-back-line); border-radius: var(--radius-sm); background: var(--g-back); box-shadow: inset 0 0 0 2px var(--g-back-in), 0 2px 4px var(--g-shade-5); padding: 0; display: grid; place-items: center; cursor: pointer; }
.dg-back svg { width: 70%; height: 70%; color: var(--g-stone); }
.dg-back:hover { border-color: var(--g-back-hover); }
.dg-face { position: relative; aspect-ratio: 1; border: 2px solid var(--g-slot-line); border-radius: var(--radius-sm); background: var(--g-slot); display: grid; place-items: center; animation: dg-flip 420ms ease; }
.dg-face .dl-im { width: 76%; height: auto; aspect-ratio: 1; }
.dg-face.is-ok { border-color: var(--g-ok); box-shadow: 0 0 12px var(--g-glow); }
.dg-face b { position: absolute; left: 0; right: 0; bottom: -2px; font-size: var(--fs-10); font-weight: 700; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; white-space: nowrap; overflow: hidden; }
.dg-face.is-ok b { color: var(--g-yellow); }
@keyframes dg-flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.dg-navy { align-self: center; margin-top: 10px; height: 34px; min-width: 150px; border-radius: var(--radius-sm); border: 1px solid #000; background: linear-gradient(var(--g-navy-1), var(--g-navy-2)); box-shadow: inset 0 1px 0 var(--g-hi-3), inset 0 0 0 1px var(--g-navy-line); color: var(--g-navy-text); font-weight: 700; font-size: var(--fs-14); letter-spacing: .1em; cursor: pointer; }
.dg-navy:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.dg-navy.is-pri { background: linear-gradient(var(--g-pri-1), var(--g-pri-2)); box-shadow: inset 0 1px 0 var(--g-hi-3), inset 0 0 0 1px var(--g-gold-4); color: var(--g-yellow-2); }
.dg-navy:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--g-yellow); }
.dg-in--inv { padding: 12px 12px 0; }
.dg-inv-frame { position: relative; flex: 1; }
.dg-inv-empty { position: absolute; left: 0; right: 22px; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; pointer-events: none; color: var(--g-text); font-size: var(--fs-14); font-weight: 700; line-height: 22px; text-shadow: 1px 1px 0 #000; }
.dg-inv-empty span { font-weight: 400; font-size: var(--fs-12); color: var(--g-mute); }
.dg-invbar { display: flex; justify-content: space-between; align-items: center; height: 38px; margin: 10px -12px 0; padding: 0 12px; border-top: 2px solid var(--g-scroll-track); background: linear-gradient(var(--g-bar-1), var(--g-bar-2)); }
.dg-ic { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: var(--g-ic); font: 700 var(--fs-14)/1 var(--g-serif); text-shadow: 1px 1px 0 #000; }
.dg-ic .dl-ico { width: 17px; height: 17px; }
.dg-ic.is-on, .dg-ic[aria-pressed="true"] { color: var(--g-yellow); filter: drop-shadow(0 0 4px var(--g-glow)); }
button.dg-ic { cursor: pointer; }
button.dg-ic:hover { color: #fff; }
.dg-msg { grid-column: 1 / -1; height: 120px; padding: 8px 12px; background: var(--g-msg); border: 1px solid #000; border-radius: var(--radius-xs); font-size: var(--fs-13); line-height: 20px; font-weight: 500; color: var(--g-white); text-shadow: 1px 1px 0 #000;
display: flex; flex-direction: column-reverse; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--g-scroll) var(--g-scroll-track); overscroll-behavior: contain; }
.dg-msg > div { flex: none; }
.dg-msg .m-ok { color: var(--g-yellow); } .dg-msg .m-sys { color: var(--g-sys); } .dg-msg .m-warn { color: var(--g-warn); }
.dg-tip { position: fixed; z-index: 50; max-width: 240px; padding: 8px 10px; border: 1px solid #000; border-radius: var(--radius-xs); background: var(--g-tip); color: var(--g-tip-text); font-size: var(--fs-12); line-height: 18px; pointer-events: none; box-shadow: 0 4px 12px var(--g-shade-4); }
.dg-tip b { color: var(--g-yellow); display: block; }
.dg-tip span { color: var(--g-tip-mute); }
.dg-dlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--g-shade-5); }
.dg-dlg__win { width: min(460px, 100%); color: var(--g-text); animation: dg-pop 180ms ease-out; }
@keyframes dg-pop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.dg-dlg__in { align-items: center; padding: 64px 20px 18px; text-align: center; }
.dg-dlg__badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--fs-18)/1 var(--g-serif); color: var(--g-gold-3); background: radial-gradient(circle at 40% 35%, var(--g-gold-6), var(--g-gold-1) 50%, var(--g-gold-2)); box-shadow: 0 0 0 1px #000, 0 0 12px var(--g-glow); }
.dg-dlg__t { position: relative; margin: 0; font-size: var(--fs-16); font-weight: 700; color: var(--g-yellow); text-shadow: 1px 1px 0 #000; }
.dg-dlg__p { position: relative; margin: 8px 0 0; font-size: var(--fs-13); line-height: 21px; color: var(--g-text-2); }
.dg-dlg__p b { color: #fff; }
.dg-need { position: relative; list-style: none; margin: 14px 0 0; padding: 4px 10px; width: 100%; background: var(--g-shade-3); border: 1px solid var(--g-silver-line); border-radius: var(--radius-sm); }
.dg-need li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; height: 40px; border-bottom: 1px solid var(--g-hi); font-size: var(--fs-12); color: var(--g-mute); text-align: left; }
.dg-need li:last-child { border-bottom: 0; }
.dg-need__ic { width: 30px; height: 30px; display: grid; place-items: center; background: var(--g-slot); border: 1px solid var(--g-slot-line); border-radius: var(--radius-sm); }
.dg-need__ic svg, .dg-need__ic .dl-im { width: 24px; height: 24px; }
.dg-need__name { color: var(--g-text); font-size: var(--fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-need__n b { color: #fff; font-weight: 700; }
.dg-need__n.is-short, .dg-need__n.is-short b { color: var(--g-short); }
.dg-need__n.is-ok { color: var(--g-ok-text); }
.dg-dlg__btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.dg-dlg__btns .dg-navy { margin: 0; min-width: 110px; padding: 0 14px; letter-spacing: 0; font-size: var(--fs-13); }
.dg-toast { position: fixed; left: 50%; top: 38%; z-index: 55; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 18px; border-radius: var(--radius-sm); pointer-events: none;
background: var(--g-msg); border: 1px solid #000; color: var(--g-yellow); font-size: var(--fs-15); font-weight: 700; line-height: 22px; text-shadow: 1px 1px 0 #000; text-align: center; }
.dg-toast.is-in { animation: dg-tin 160ms ease-out; }
.dg-toast.is-out { opacity: 0; transition: opacity 300ms; }
@keyframes dg-tin { 0% { transform: translate(-50%, 6px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
/* ── 비용·결과 정산 ── */
.dl-cost { border: 1px solid var(--dl-line); border-radius: var(--dl-r); background: var(--dl-sf); }
.dl-cost__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px var(--dl-pad); border-bottom: 1px solid var(--dl-line); }
.dl-cost__hd h3 { margin: 0; font-size: var(--fs-15); }
.dl-cost__hd span { font-size: var(--fs-12); color: var(--dl-t3); margin-left: auto; }
.dl-cost__kpi { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--dl-line); }
.dl-cost__kpi > div { padding: 14px var(--dl-pad); border-right: 1px solid var(--dl-line); min-width: 0; }
.dl-cost__kpi > div:last-child { border-right: 0; }
.dl-cost__kpi dt { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-cost__kpi dd { margin: 4px 0 0; font-size: var(--fs-20); font-weight: 700; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-cost__kpi dd small { display: block; font-size: var(--fs-12); font-weight: 400; line-height: 18px; color: var(--dl-t3); white-space: normal; }
.dl-cost__kpi .is-main dd { color: var(--dl-ac-strong); }
.dl-cost__blk { padding: 14px var(--dl-pad) 4px; }
.dl-cost__blk h4 { margin: 0 0 6px; font-size: var(--fs-13); color: var(--dl-t2); }
.dl-scroll { overflow-x: auto; }
.dl-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.dl-tbl th, .dl-tbl td { height: 44px; padding: 0 10px; border-bottom: 1px solid var(--dl-line); text-align: right; white-space: nowrap; }
.dl-tbl th:first-child { text-align: left; padding-left: 0; font-weight: 500; color: var(--dl-t1); }
.dl-tbl td:last-child { padding-right: 0; font-weight: 600; }
.dl-tbl thead th { height: 32px; font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); }
.dl-tbl thead th:first-child { font-weight: 400; color: var(--dl-t3); }
.dl-tbl th small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); }
.dl-tbl tfoot th, .dl-tbl tfoot td { border-bottom: 0; font-size: var(--fs-15); font-weight: 700; }
.dl-tbl tfoot td { color: var(--dl-ac-strong); font-size: var(--fs-16); }
.dl-tbl input { width: 120px; height: 32px; text-align: right; }
.dl-tbl .muted { color: var(--dl-t3); font-weight: 400; }
.dl-tbl .up, .dl-cost__sum .up { color: var(--dl-up); }
.dl-tbl .down, .dl-cost__sum .down { color: var(--dl-down); }
.dl-tbl--tries tfoot th { font-size: var(--fs-13); font-weight: 500; color: var(--dl-t2); }
.dl-tbl--tries tfoot td { font-size: var(--fs-14); font-weight: 600; color: var(--dl-t1); }
.dl-cost__own { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; }
.dl-cost__own span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--dl-r); background: var(--dl-sf2); font-size: var(--fs-13); color: var(--dl-t2); }
.dl-cost__own span b { color: var(--dl-t1); }
.dl-cost__own .dl-im { width: 24px; height: 24px; margin-left: -4px; }
.dl-cost__own .is-t3 { background: var(--dl-ac-weak); }
.dl-cost__own .is-t3 b { color: var(--dl-ac-strong); }
.dl-cost__sum { margin: 0; padding: 12px var(--dl-pad); border-top: 1px solid var(--dl-line); background: var(--dl-sf2); font-size: var(--fs-13); line-height: 21px; color: var(--dl-t2); border-radius: 0 0 var(--dl-r) var(--dl-r); }
.dl-cost__sum b { color: var(--dl-t1); }
/* ── 결과 퍼가기 ── */
.dl-share { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--dl-scrim); }
.dl-share__box { width: min(760px, 100%); max-height: calc(100% - 8px); overflow-y: auto; background: var(--dl-sf); color: var(--dl-t1); border-radius: var(--radius-md); box-shadow: var(--dl-pop); }
.dl-share__hd { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--dl-pad); border-bottom: 1px solid var(--dl-line); position: sticky; top: 0; background: var(--dl-sf); z-index: 1; }
.dl-share__hd h3 { margin: 0; font-size: var(--fs-15); }
.dl-share__x { width: 32px; height: 32px; border: 0; border-radius: var(--dl-r); background: transparent; color: var(--dl-t3); display: grid; place-items: center; cursor: pointer; }
.dl-share__x:hover { background: var(--dl-sf2); color: var(--dl-t1); }
.dl-share__empty { margin: 0; padding: 28px var(--dl-pad); color: var(--dl-t2); font-size: var(--fs-13); line-height: 21px; }
.dl-share__bd { padding: 14px var(--dl-pad) 18px; display: flex; flex-direction: column; gap: 12px; }
.dl-share__img { display: block; width: 100%; aspect-ratio: 1200 / 630; border-radius: var(--radius-sm); background: var(--dl-sf3); }
.dl-share__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dl-share__msg { margin: 0; min-height: 20px; font-size: var(--fs-13); line-height: 20px; color: var(--dl-t2); }
.dl-share__msg.is-ok { color: var(--dl-up); } .dl-share__msg.is-warn { color: var(--dl-down); }
.dl-share__more summary { cursor: pointer; font-size: var(--fs-12); color: var(--dl-t3); }
.dl-share__more textarea, .dl-share__more input { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--dl-line2); border-radius: var(--dl-r); background: var(--dl-sf2); color: var(--dl-t1); font-size: var(--fs-12); line-height: 19px; resize: vertical; }
.dl-share__more input { height: 34px; }
.dl-share__recv { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--dl-line); }
.dl-recv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--dl-r); background: var(--dl-ac-weak); }
.dl-recv__ic { display: flex; gap: 2px; flex: none; }
.dl-recv__ic .dl-im { width: 36px; height: 36px; }
.dl-recv__ic .is-ghost { opacity: .35; }
.dl-recv__tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dl-recv__tx b { font-size: var(--fs-13); color: var(--dl-ac-strong); }
.dl-recv__tx span { font-size: var(--fs-13); color: var(--dl-t1); }
.dl-recv__tx small { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-recv__go { flex: none; text-decoration: none; }
/* ── 계산 탭 (주머니 N개 결과 · 목표까지 비용) ── */
.dl-pane--calc { gap: 16px; }
.dl-setbar { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; padding: 14px 16px; border-radius: var(--dl-r); background: var(--dl-sf2); }
.dl-set { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dl-set__lbl { font-size: var(--fs-12); color: var(--dl-t3); }
.dl-set__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dl-num { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--dl-t2); }
.dl .dl-num input { width: 96px; height: 38px; text-align: right; font-weight: 600; }
.dl-switch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0; border: 0; background: transparent; font-size: var(--fs-13); color: var(--dl-t1); cursor: pointer; }
.dl-switch i { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--dl-line2); flex: none; transition: background 150ms; }
.dl-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dl-knob); box-shadow: var(--dl-knob-shadow); transition: transform 150ms; }
.dl-switch[aria-checked="true"] i { background: var(--dl-ac-fill); }
.dl-switch[aria-checked="true"] i::after { transform: translateX(16px); }
.dl-set--more { flex-basis: 100%; }
.dl-set--more summary { cursor: pointer; font-size: var(--fs-13); color: var(--dl-t2); }
.dl-set--more summary b { color: var(--dl-ac-strong); font-weight: 600; }
.dl-set--more .dl-chips { margin-top: 8px; }
.dl-set--pick { flex: 1; min-width: 260px; }
.dl-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-pick button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; border: 1px solid var(--dl-line2); border-radius: var(--dl-r); background: var(--dl-sf); color: var(--dl-t1); font-size: var(--fs-13); cursor: pointer; }
.dl-pick button .dl-im { width: 24px; height: 24px; }
.dl-pick button[aria-checked="true"] { border-color: transparent; background: var(--dl-ac-weak); color: var(--dl-ac-strong); font-weight: 600; }
.dl-answer { padding: 18px 20px; border-radius: var(--dl-r); background: var(--dl-ac-weak); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.dl-answer__q { margin: 0; font-size: var(--fs-14); color: var(--dl-t2); flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dl-answer__q b { color: var(--dl-t1); }
.dl-answer__a { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-16); color: var(--dl-t1); }
.dl-answer__a strong { font-size: var(--fs-36); line-height: 42px; font-weight: 800; color: var(--dl-ac-strong); letter-spacing: -.01em; }
.dl-answer__s { margin: 0; font-size: var(--fs-13); color: var(--dl-t2); line-height: 20px; }
.dl-answer__s b { color: var(--dl-t1); }
.dl-answer .dl-im { width: 32px; height: 32px; }
.dl-answer__who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--dl-t1); }
.dl-answer__who small { font-weight: 400; color: var(--dl-t3); }
.dl-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.dl-panel { border: 1px solid var(--dl-line); border-radius: var(--dl-r); padding: 14px 16px 12px; min-width: 0; display: flex; flex-direction: column; }
.dl-panel h4 { margin: 0 0 8px; font-size: var(--fs-14); display: flex; align-items: baseline; gap: 8px; }
.dl-panel h4 small { font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); }
.dl-kv { margin: 0; }
.dl-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--dl-line); }
.dl-kv > div:last-child { border-bottom: 0; }
.dl-kv dt { font-size: var(--fs-13); color: var(--dl-t2); }
.dl-kv dt small { display: block; font-size: var(--fs-12); color: var(--dl-t3); }
.dl-kv dd { margin: 0; font-size: var(--fs-18); font-weight: 700; text-align: right; white-space: nowrap; }
.dl-kv dd small { font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); margin-left: 2px; }
.dl-dist { list-style: none; margin: 0; padding: 0; }
.dl-dist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px 92px; align-items: center; gap: 10px; height: 40px; border-bottom: 1px solid var(--dl-line); font-size: var(--fs-13); }
.dl-dist li:last-child { border-bottom: 0; }
.dl-dist__k { color: var(--dl-t1); font-weight: 600; }
.dl-dist__bar { height: 12px; border-radius: var(--radius-pill); background: var(--dl-sf3); overflow: hidden; }
.dl-dist__bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--dl-ac); }
.dl-dist__v { text-align: right; font-weight: 700; }
.dl-dist__c { text-align: right; font-size: var(--fs-12); color: var(--dl-t3); }
.dl-dist li.is-zero .dl-dist__k, .dl-dist li.is-zero .dl-dist__v { color: var(--dl-t3); font-weight: 400; }
.dl-ms { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.dl-ms th, .dl-ms td { height: 40px; padding: 0 8px; text-align: right; border-bottom: 1px solid var(--dl-line); white-space: nowrap; }
.dl-ms th:first-child, .dl-ms td:first-child { text-align: left; padding-left: 0; }
.dl-ms td:last-child, .dl-ms th:last-child { padding-right: 0; }
.dl-ms thead th { height: 30px; font-size: var(--fs-12); font-weight: 400; color: var(--dl-t3); }
.dl-ms tbody td { color: var(--dl-t2); }
.dl-ms tbody td.b { color: var(--dl-t1); font-weight: 700; }
.dl-ms tr.is-key td { background: var(--dl-ac-weak); }
.dl-ms tr.is-key td:first-child { box-shadow: inset 3px 0 0 var(--dl-ac); padding-left: 10px; }
.dl-ms tr.is-key td.b { color: var(--dl-ac-strong); }
.dl-curve { display: block; width: 100%; height: auto; margin: auto 0; }
.dl-curve text { fill: var(--dl-t3); font-size: var(--fs-12); }
.dl-curve .tag { fill: var(--dl-sf); stroke: var(--dl-ac); stroke-width: 1; }
.dl-curve .tag-t { fill: var(--dl-ac-strong); font-weight: 700; }
.dl-meta { margin: 0; display: flex; align-items: center; gap: 12px; font-size: var(--fs-12); color: var(--dl-t3); }
.dl-linkbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--dl-r); background: transparent; color: var(--dl-ac); font-size: var(--fs-12); cursor: pointer; }
.dl-linkbtn:hover { background: var(--dl-ac-weak); }
.dl-linkbtn .dl-ico { width: 14px; height: 14px; }
/* ── 마법인형 18종 ── */
.dl-tier { padding: 14px var(--dl-pad) 16px; border-bottom: 1px solid var(--dl-line); }
.dl-tier:last-child { border-bottom: 0; }
.dl-tier__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.dl-tier__chip { font-weight: 700; font-size: var(--fs-12); border-radius: var(--radius-sm); padding: 2px 8px; }
.dl-tier--1 .dl-tier__chip { background: var(--dl-tier1); color: var(--dl-tier1-t); }
.dl-tier--2 .dl-tier__chip { background: var(--dl-tier2); color: var(--dl-tier2-t); }
.dl-tier--3 .dl-tier__chip { background: var(--dl-tier3); color: var(--dl-tier3-t); }
.dl-tier__hd span { font-size: var(--fs-13); color: var(--dl-t2); }
.dl-tier__hd span + span::before { content: '·'; margin-right: 10px; color: var(--dl-t3); }
.dl-dolls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dl-doll { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border-radius: var(--dl-r); background: var(--dl-sf2); min-width: 0; text-decoration: none; color: inherit; }
.dl-doll:hover { background: var(--dl-sf3); }
.dl-doll .dl-im { width: 44px; height: 44px; grid-row: span 2; border-radius: var(--dl-r); background-color: var(--dl-sf); }
.dl-doll b { font-size: var(--fs-14); font-weight: 600; line-height: 20px; }
.dl-doll ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.dl-doll li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-12); line-height: 18px; color: var(--dl-t2); }
.dl-doll li em { font-style: normal; font-weight: 700; color: var(--dl-t1); white-space: nowrap; }
@media (max-width: 1100px) { .dl-dolls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
.dl { grid-template-columns: minmax(0, 1fr); }
.dl-left { order: 2; position: static; }
.dl-calc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.dl-facts, .dl-cost__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-fact:nth-child(2), .dl-cost__kpi > div:nth-child(2) { border-right: 0; }
.dl-fact:nth-child(-n+2), .dl-cost__kpi > div:nth-child(-n+2) { border-bottom: 1px solid var(--dl-line); }
}
@media (max-width: 640px) {
.dl-shop, .dg { grid-template-columns: minmax(0, 1fr); }
.dg { padding: 10px; }
.dg-inv { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
}
@media (max-width: 560px) {
.dl-dolls { grid-template-columns: minmax(0, 1fr); }
.dl-share__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-recv { flex-wrap: wrap; }
.dl-answer__a strong { font-size: var(--fs-28); line-height: 36px; }
.dl-dist li { grid-template-columns: 44px minmax(0, 1fr) 52px; }
.dl-dist__c { display: none; }
.dg-need { padding: 2px 8px; }
.dg-need li { gap: 6px; font-size: var(--fs-11); }
}
@media (prefers-reduced-motion: reduce) { .dg-q.is-busy, .dg-face, .dg-cell.is-new, .dg-dlg__win, .dg-toast.is-in { animation: none; } }