/* ════════════════════════════════════════
   Recto — App (시뮬레이션 툴) Styles
   css/app.css
════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

body {
  font-family: "Pretendard Variable", Pretendard;
  background: #EFF4F9;
  color: #1a1a1f;
  min-height: 100vh;
  padding-top: 64px; /* 고정 상단 바 높이 */
}

.app-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.page { padding: 36px 32px 80px; min-width: 0; max-width: 980px; }
@media (max-width: 960px) {
  .app-layout { grid-template-columns: 1fr; }
  .history-sidebar { display: none !important; }
  .page { padding: 36px 20px 80px; max-width: 100%; }
}

/* ── 히스토리 사이드바 ── */
.history-sidebar {
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  border-right: 1px solid #dfe5ed;
  padding: 36px 16px 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: transparent;
}
.history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding: 0 4px;
}
.history-title { font-size: 0.875rem; font-weight: 800; color: #1a1a1f; letter-spacing: -.3px; }
.history-new-btn {
  background: #ffffff; border: 1px solid #dfe5ed; color: #555560;
  width: 28px; height: 28px; border-radius: 8px;
  font-family: inherit; font-size: 1.125rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.history-new-btn:hover { border-color: #8B57ED; color: #8B57ED; }
.history-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.history-empty {
  text-align: center; padding: 40px 12px; color: #9a9aa6;
  font-size: 0.875rem; line-height: 1.6;
}
.history-item {
  background: #ffffff; border: 1px solid #eaeaef; border-radius: 10px;
  padding: 12px 14px; cursor: pointer;
  transition: all .15s;
}
.history-item:hover { border-color: #A989F0; background: rgba(139,87,237,.04); }
.history-item.active { border-color: #8B57ED; background: rgba(139,87,237,.06); }
.history-item-name {
  font-size: 0.875rem; font-weight: 700; color: #1a1a1f;
  letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 4px;
}
.history-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.history-item-top .history-item-name { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.history-item-edit {
  flex-shrink: 0; width: 22px; height: 22px; line-height: 1;
  border: none; background: transparent; color: #b0b0bb;
  font-size: 0.8125rem; cursor: pointer; border-radius: 6px;
  opacity: .45; transition: opacity .15s, background .15s, color .15s;
}
.history-item:hover .history-item-edit { opacity: 1; }
.history-item-edit:hover { background: rgba(139,87,237,.12); color: #8B57ED; }
.history-item-name-input {
  flex: 1 1 auto; min-width: 0; width: 100%; font-family: inherit;
  font-size: 0.875rem; font-weight: 700; color: #1a1a1f; letter-spacing: -.2px;
  border: 1px solid #8B57ED; border-radius: 6px; padding: 2px 6px;
  outline: none; background: #fff;
}
.history-item-meta { font-size: 0.75rem; color: #8a8a96; display: flex; align-items: center; gap: 6px; }
.history-item-winner { font-weight: 700; }
.history-item-winner.win-a { color: #22C09B; }
.history-item-winner.win-b { color: #5A77F9; }

/* 비프리미엄 잠금 */
.history-lock {
  position: absolute; inset: 70px 16px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  pointer-events: auto;
}
.history-lock-mock {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
  filter: blur(4px); opacity: .55; user-select: none; pointer-events: none;
}
.history-mock-item {
  height: 54px; background: #ffffff; border: 1px solid #eaeaef; border-radius: 10px;
}
.history-lock-cta {
  margin-top: 28px; text-align: center;
  background: #ffffff; border: 1px solid #e5e5ea; border-radius: 14px;
  padding: 22px 18px; box-shadow: 0 8px 20px rgba(20,15,40,.06);
  width: 100%;
}
.history-lock-cta .lock-icon { font-size: 1.5rem; margin-bottom: 8px; }
.history-lock-cta .lock-text { font-size: 0.875rem; font-weight: 800; color: #1a1a1f; margin-bottom: 6px; }
.history-lock-cta .lock-sub { font-size: 0.75rem; color: #8a8a96; line-height: 1.5; margin-bottom: 14px; }
.history-lock-cta .lock-cta {
  width: 100%; padding: 9px 12px; font-size: 0.8125rem;
  border-radius: 9px;
}

/* ── App Nav (full-width top bar, 레이아웃 폭에 정렬) ── */
.app-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid #dfe5ed;
}
.app-nav-inner {
  display: flex; align-items: center; gap: 16px;
  height: 64px;
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 600px) {
  .app-nav-inner { height: 56px; padding: 0 16px; gap: 10px; }
}
.app-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.0625rem; font-weight: 900; color: #1a1a1f; text-decoration: none;
  letter-spacing: -.5px;
}
.app-nav-logo-icon {
  width: 30px; height: 30px; background: linear-gradient(135deg,#8B57ED,#A989F0);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.trial-badge { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.trial-count { font-size: 0.875rem; color: #8a8a96; letter-spacing: -.2px; }
.trial-count span { color: #1a1a1f; font-weight: 800; }
.trial-pips { display: flex; gap: 4px; }
.trial-pip { width: 8px; height: 8px; border-radius: 50%; background: #8B57ED; transition: background .2s; }
.trial-pip.used { background: #e5e5ea; }
.btn-upgrade {
  background: linear-gradient(135deg, #8B57ED, #A989F0);
  color: #fff; border: none; font-family: inherit;
  font-size: 0.875rem; font-weight: 700; padding: 6px 14px;
  border-radius: 8px; cursor: pointer; transition: opacity .15s;
  text-decoration: none;
}
.btn-upgrade:hover { opacity: .85; }

.nav-right { display: flex; align-items: center; gap: 10px; }

.btn-google-login {
  display: flex; align-items: center; gap: 6px;
  background: #fff; color: #1a1a1f; border: 1px solid #d4d4dc; font-family: inherit;
  font-size: 0.875rem; font-weight: 600; padding: 6px 12px;
  border-radius: 8px; cursor: pointer; transition: opacity .15s;
}
.btn-google-login:hover { opacity: .85; }

.user-info { display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 0.875rem; color: #555560; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout {
  background: transparent; border: 1px solid #d4d4dc; color: #8a8a96;
  font-family: inherit; font-size: 0.9375rem; padding: 4px 10px;
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.btn-logout:hover { border-color: #ff3b30; color: #ff3b30; }

.pro-badge-nav {
  background: rgba(139,87,237,.15); border: 1px solid rgba(139,87,237,.3);
  color: #A989F0; font-size: 0.9375rem; font-weight: 700;
  padding: 4px 10px; border-radius: 6px; letter-spacing: .3px;
}

/* ── Header ── */
/* ── Variants ── */
.variants-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 680px) { .variants-row { grid-template-columns: 1fr; } }

.vcard {
  background: #ffffff; border: 1px solid #e5e5ea;
  border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.vcard-head { display: flex; align-items: center; gap: 10px; }
.vtag { font-size: 0.9375rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; flex-shrink: 0; letter-spacing: .2px; }
.vtag-a { background: rgba(34,192,155,.14); color: #22C09B; }
.vtag-b { background: rgba(90,119,249,.14); color: #5A77F9; }
.vname-input {
  background: transparent; border: none; border-bottom: 1px solid #d4d4dc;
  color: #1a1a1f; font-family: inherit; font-size: 0.875rem; font-weight: 700;
  outline: none; flex: 1; padding: 2px 4px; transition: border-color .18s;
}
.vname-input:focus { border-color: #A989F0; }

/* ── Upload Zone ── */
.upload-zone {
  border: 2px dashed #d4d4dc; border-radius: 14px;
  min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all .18s; position: relative;
  text-align: center; padding: 20px;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: #A989F0; background: rgba(139,87,237,.05); }
.upload-zone.drag-over { border-style: solid; }
.upload-icon { font-size: 1.75rem; }
.upload-main { font-size: 0.9375rem; font-weight: 600; color: #555560; }
.upload-sub { font-size: 0.9375rem; color: #9a9aa6; }
.upload-zone input[type=file] { display: none; }

/* ── Image + Drag Select ── */
.img-wrap { position: relative; border-radius: 12px; overflow: hidden; display: none; cursor: crosshair; user-select: none; }
.img-wrap.show { display: block; }
.design-img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.drag-overlay { position: absolute; inset: 0; cursor: crosshair; }
.drag-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(139,87,237,.92); border-radius: 20px;
  font-size: 0.9375rem; font-weight: 600; color: #fff;
  padding: 6px 14px; white-space: nowrap;
  pointer-events: none; transition: opacity .3s;
  box-shadow: 0 4px 14px rgba(139,87,237,.35);
  animation: hintPulse 2.2s ease-in-out infinite;
}
.drag-hint.hidden { opacity: 0; animation: none; }
@keyframes hintPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

/* ── Drag Demo (드래그 안내 애니메이션) ── */
.drag-demo {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity .25s;
}
.drag-demo.hidden { opacity: 0; }
.drag-demo-rect {
  position: absolute;
  border: 2px dashed rgba(139,87,237,.85);
  background: rgba(139,87,237,.08);
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
  animation: dragDemoRect 3.2s ease-in-out infinite;
}
.drag-demo-cursor {
  position: absolute;
  width: 22px; height: 28px;
  margin-left: -3px; margin-top: -2px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  animation: dragDemoCursor 3.2s ease-in-out infinite;
  will-change: left, top, transform, opacity;
}
@keyframes dragDemoCursor {
  0%   { left: 22%; top: 26%; transform: scale(1);   opacity: 0; }
  6%   { left: 22%; top: 26%; transform: scale(1);   opacity: 1; }
  16%  { left: 22%; top: 26%; transform: scale(.82); opacity: 1; }
  66%  { left: 70%; top: 66%; transform: scale(.82); opacity: 1; }
  74%  { left: 70%; top: 66%; transform: scale(1);   opacity: 1; }
  92%  { left: 70%; top: 66%; transform: scale(1);   opacity: 1; }
  100% { left: 22%; top: 26%; transform: scale(1);   opacity: 0; }
}
@keyframes dragDemoRect {
  0%, 16%  { left: 22%; top: 26%; width: 0;   height: 0;   opacity: 0; }
  17%      { left: 22%; top: 26%; width: 0;   height: 0;   opacity: 1; }
  66%      { left: 22%; top: 26%; width: 48%; height: 40%; opacity: 1; }
  92%      { left: 22%; top: 26%; width: 48%; height: 40%; opacity: 1; }
  100%     { left: 22%; top: 26%; width: 48%; height: 40%; opacity: 0; }
}

/* ── Selection Rect ── */
.sel-rect { position: absolute; border: 2px solid #8B57ED; background: rgba(139,87,237,.08); border-radius: 4px; pointer-events: none; display: none; }
.sel-rect.show { display: block; }
.sel-rect-label {
  position: absolute; top: -22px; left: 0;
  font-size: 0.875rem; font-weight: 700; color: #A989F0; letter-spacing: .3px;
  background: rgba(0,0,0,.85); padding: 2px 6px; border-radius: 4px; white-space: nowrap; color: #fff;
}

/* ── Pulse ── */
.pulse {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(34,192,155,.78); transform: translate(-50%,-50%);
  pointer-events: none; animation: pulseAnim .55s ease-out forwards;
}
@keyframes pulseAnim {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(.4); }
  60%  { opacity: .9; transform: translate(-50%,-50%) scale(1.7); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* ── Image Actions ── */
.img-actions { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.img-actions.show { display: flex; }
.btn-clear {
  background: transparent; border: 1px solid #d4d4dc; color: #8a8a96;
  font-family: inherit; font-size: 0.875rem; padding: 5px 12px;
  border-radius: 8px; cursor: pointer; transition: all .18s;
}
.btn-clear:hover { border-color: #ff3b30; color: #ff3b30; }
.sel-status { font-size: 0.9375rem; color: #9a9aa6; }
.sel-status.done { color: #22C09B; }

/* ── CTR ── */
.base-ctr-wrap { display: flex; align-items: center; gap: 4px; }
.base-ctr-wrap input {
  background: #eaeaef; border: 1px solid #d4d4dc; border-radius: 8px;
  color: #1a1a1f; font-family: inherit; font-size: 0.875rem; font-weight: 700;
  padding: 5px 8px; outline: none; width: 64px; -moz-appearance: textfield; appearance: textfield;
}
.base-ctr-wrap input::-webkit-outer-spin-button,
.base-ctr-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.base-ctr-wrap input:focus { border-color: #A989F0; }
.base-ctr-unit { font-size: 0.9375rem; color: #8a8a96; font-weight: 700; }

.ctr-predict-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-bottom: 2px; }
.ctr-predict-left { display: flex; align-items: center; gap: 6px; }
.ctr-predict-lbl { font-size: 0.875rem; color: #9a9aa6; }
.ctr-predict-badge { font-size: 0.8125rem; font-weight: 700; color: #9a9aa6; background: #eaeaef; border: 1px solid #d4d4dc; border-radius: 4px; padding: 1px 6px; letter-spacing: .3px; }
.ctr-value { font-size: 0.875rem; font-weight: 800; min-width: 38px; text-align: right; }
.ctr-value-a { color: #22C09B; }
.ctr-value-b { color: #5A77F9; }

/* ── Mini Stats ── */
.vstats { display: flex; gap: 8px; }
.vstat { flex: 1; background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 10px; padding: 8px 10px; text-align: center; }
.vstat-val { font-size: 1.125rem; font-weight: 800; letter-spacing: -.6px; }
.vstat-lbl { font-size: 0.875rem; color: #9a9aa6; margin-top: 1px; }
.vctr-display { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.vctr-num { font-size: 1.25rem; font-weight: 800; letter-spacing: -.5px; }
.vctr-unit { font-size: 0.9375rem; color: #9a9aa6; }

/* ── Controls ── */
.controls { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* 집중 유도 상하 흔들기 (ease-in-out, 선택할 때까지 무한 반복) */
@keyframes attentionBounce {
  0%, 60%, 100% { transform: translateY(0);    box-shadow: 0 0 0 0 rgba(139,87,237,0); }
  15%           { transform: translateY(-6px); box-shadow: 0 6px 14px rgba(139,87,237,.18); }
  30%           { transform: translateY(0);    box-shadow: 0 0 0 0 rgba(139,87,237,0); }
  45%           { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(139,87,237,.12); }
}
.attention-shake {
  animation: attentionBounce 1.8s ease-in-out infinite;
  border-color: #A989F0 !important;
}
.controls > * { flex: 1 1 auto; min-width: 140px; }
.count-chip { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 1 auto; }
.count-chip label { font-size: 0.875rem; color: #8a8a96; white-space: nowrap; flex-shrink: 0; }
select.n-sel { background: transparent; border: none; color: #1a1a1f; font-family: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; outline: none; white-space: nowrap; }
select.n-sel option { background: #ffffff; }
.btn-run {
  background: #8B57ED; color: #fff; border: none;
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  padding: 12px 28px; border-radius: 12px; cursor: pointer;
  letter-spacing: -.3px; transition: opacity .18s;
}
.btn-run:disabled { opacity: .35; cursor: not-allowed; }
.btn-run:not(:disabled):hover { opacity: .82; }
.btn-reset {
  background: #ffffff; border: 1px solid #e5e5ea; color: #7a7a86;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: all .18s;
}
.btn-reset:disabled { opacity: .3; cursor: not-allowed; }
.btn-reset:not(:disabled) { border-color: #c4c4cc; color: #555560; }
.btn-reset:not(:disabled):hover { border-color: #8a8a96; color: #2c2c33; }

/* ── Progress ── */
.progress-wrap { margin-bottom: 24px; display: none; }
.progress-wrap.show { display: block; }
.progress-track { height: 4px; background: #e5e5ea; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #8B57ED, #A989F0); width: 0%; transition: width .08s linear; }
.progress-lbl { text-align: center; font-size: 0.875rem; color: #9a9aa6; margin-top: 6px; }

/* ── Results ── */
.results { display: none; }
.results.show { display: block; }
.section-lbl { font-size: 0.9375rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #aaaab3; margin-bottom: 14px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 640px) { .metrics-grid { grid-template-columns: 1fr; } }
.mcard { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 16px; padding: 20px; }
.mcard-title { font-size: 0.875rem; color: #7a7a86; margin-bottom: 14px; letter-spacing: .2px; }
.mcard-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.mval { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; }
.mval-a { color: #22C09B; } .mval-b { color: #5A77F9; }
.msub { font-size: 0.8125rem; color: #8a8a96; margin-top: 4px; }
.mvs { font-size: 0.8125rem; color: #d4d4dc; }

/* ── Distribution ── */
.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
@media (max-width: 640px) { .dist-grid { grid-template-columns: 1fr; } }
.dist-card { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 16px; padding: 24px; }
.dist-head { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: #2c2c33; margin-bottom: 22px; }
.drow { margin-bottom: 16px; }
.drow:last-child { margin-bottom: 0; }
.drow-meta { display: flex; justify-content: space-between; margin-bottom: 8px; }
.drow-name { font-size: 0.875rem; color: #6b6b76; }
.drow-cnt { font-size: 0.9375rem; font-weight: 700; color: #2c2c33; }
.bar-track { height: 10px; background: #e5e5ea; border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; width: 0%; transition: width .25s ease; }
.bar-a { background: linear-gradient(90deg, #22C09B, #5BD4B5); }
.bar-b { background: linear-gradient(90deg, #5A77F9, #7B91FB); }

/* ── Winner ── */
.winner-card {
  background: linear-gradient(135deg, #f5f1ff, #ede5ff);
  border: 1px solid rgba(139,87,237,.25); border-radius: 20px;
  padding: 36px 32px; text-align: center; position: relative; overflow: hidden;
}
.winner-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(139,87,237,.18) 0%, transparent 65%);
  pointer-events: none;
}
.trophy { font-size: 2.5rem; margin-bottom: 10px; }
.winner-eyebrow { font-size: 0.9375rem; font-weight: 700; letter-spacing: .8px; color: #8a7ab5; text-transform: uppercase; margin-bottom: 12px; }
.winner-name {
  font-size: 2.25rem; font-weight: 900; letter-spacing: -1.5px;
  margin-bottom: 8px; color: #1a1a1f;
  display: inline-block; padding: 0 10px;
  background: linear-gradient(180deg, transparent 62%, var(--win-accent, transparent) 62%, var(--win-accent, transparent) 92%, transparent 92%);
  border-radius: 4px;
}
.winner-name.win-a { --win-accent: rgba(34,192,155,.42); }
.winner-name.win-b { --win-accent: rgba(90,119,249,.48); }
.winner-uplift { font-size: 1rem; color: #6b6b76; margin-bottom: 24px; margin-top: 8px; }
.winner-uplift span { color: #1a1a1f; font-weight: 700; }
.winner-divider { width: 40px; height: 1px; background: #d4c4f5; margin: 0 auto 22px; }
.winner-insight { font-size: 0.9375rem; color: #6b6b76; line-height: 1.75; letter-spacing: -.2px; max-width: 520px; margin: 0 auto; }
.winner-insight strong { color: #1a1a1f; font-weight: 800; }
.conf-wrap { margin-top: 28px; max-width: 320px; margin-left: auto; margin-right: auto; }
.conf-lbl { display: flex; justify-content: space-between; font-size: 0.875rem; color: #7a7a86; margin-bottom: 10px; }
.conf-track { height: 10px; background: #e8e0f5; border-radius: 5px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #8B57ED, #A989F0); width: 0%; transition: width 1s ease; }

/* ── 실측 데이터 패널 ── */
.real-panel { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 20px; padding: 0; margin-bottom: 20px; overflow: hidden; }
.real-panel-toggle { display: flex; align-items: center; gap: 10px; padding: 18px 24px; cursor: pointer; user-select: none; transition: background .15s; }
.real-panel-toggle:hover { background: #f0f0f3; }
.real-toggle-arrow { font-size: 0.875rem; color: #9a9aa6; transition: transform .22s; margin-left: auto; }
.real-panel.open .real-toggle-arrow { transform: rotate(180deg); }
.real-panel-title { font-size: 0.875rem; font-weight: 700; color: #6b6b76; }
.real-optional-badge { font-size: 0.875rem; font-weight: 700; color: #9a9aa6; background: #eaeaef; border: 1px solid #d4d4dc; border-radius: 6px; padding: 2px 7px; letter-spacing: .3px; }
.real-verified-badge { color: #178b6b; background: #e3f7f0; border-color: #b6e8d8; }
.real-panel-sub { font-size: 0.9375rem; color: #aaaab3; }

/* 실측 패널 격상 — '진짜 검증'임을 시각적으로 강조 */
.real-panel { border-color: #b6e8d8; box-shadow: 0 2px 14px rgba(34,192,155,.10); }
.real-panel .real-panel-title { color: #178b6b; }

/* 예측 면책 배너 — 시뮬레이션은 검증이 아님 */
.predict-disclaimer {
  display: flex; align-items: flex-start; gap: 11px;
  background: #f4f0ff; border: 1px solid #e0d6ff; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 22px;
}
.predict-disclaimer-icon { font-size: 1.125rem; line-height: 1.4; flex-shrink: 0; }
.predict-disclaimer-text { font-size: 0.875rem; line-height: 1.55; color: #6b5b96; }
.predict-disclaimer-text strong { color: #5a3fc0; font-weight: 700; }
.real-body { display: none; padding: 0 24px 22px; }
.real-panel.open .real-body { display: block; }
.real-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.real-variant { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 12px; padding: 14px; }
.real-variant-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.real-variant-name { background: transparent; border: none; border-bottom: 1px solid #e5e5ea; color: #6b6b76; font-family: inherit; font-size: 0.875rem; font-weight: 600; padding: 2px 4px; outline: none; width: 100px; transition: border-color .15s; }
.real-variant-name:focus { border-color: #A989F0; color: #3a3a42; }
.real-variant-name::placeholder { color: #aaaab3; }
.real-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.real-lbl { font-size: 0.9375rem; color: #9a9aa6; min-width: 36px; }
.real-input { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 8px; color: #1a1a1f; font-family: inherit; font-size: 0.875rem; font-weight: 700; padding: 6px 10px; outline: none; width: 130px; transition: border-color .18s; }
.real-input:focus { border-color: #A989F0; }
.real-input::placeholder { color: #d4d4dc; font-weight: 400; font-size: 0.9375rem; }
.btn-analyze { background: #e5e5ea; border: none; color: #7a7a86; font-family: inherit; font-size: 0.9375rem; font-weight: 700; padding: 10px 20px; border-radius: 10px; cursor: not-allowed; transition: all .18s; width: 100%; }
.btn-analyze:not(:disabled) { color: #555560; cursor: pointer; }
.btn-analyze:not(:disabled):hover { background: #d4d4dc; color: #1a1a1f; }
.btn-analyze:disabled { opacity: .4; }
.real-result { display: none; margin-top: 16px; }
.real-result.show { display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2,1fr); } }
.stat-box { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 10px; padding: 16px 12px; text-align: center; }
.stat-box-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -.5px; }
.stat-box-lbl { font-size: 0.8125rem; color: #8a8a96; margin-top: 6px; }
.stat-verdict { border-radius: 12px; padding: 16px 18px; font-size: 0.9375rem; line-height: 1.7; letter-spacing: -.2px; }
.stat-verdict.sig-neg { background: rgba(255,59,48,.08); border: 1px solid rgba(255,59,48,.25); color: #c0392b; }
.stat-verdict.sig-pos { background: rgba(34,192,155,.1);  border: 1px solid rgba(34,192,155,.3); color: #15805b; }
.stat-verdict.insig   { background: rgba(214,162,10,.1);  border: 1px solid rgba(214,162,10,.3); color: #8a6d00; }
.stat-verdict strong  { color: #1a1a1f; }
.req-n-row { margin-top: 10px; font-size: 0.875rem; color: #9a9aa6; text-align: center; }
.req-n-row span { color: #A989F0; font-weight: 700; }

/* ── UI 디자인 분석 ── */
.ui-analysis { display: none; margin-bottom: 48px; }
.ui-analysis.show { display: block; }

/* ── Claude AI 분석 섹션 (픽셀 분석과 별도 그룹, 강한 visual break) ── */
.ai-section-wrap { margin-top: 0; }
.ai-section-head { border-top: 1px solid #e5e5ea; padding-top: 32px; margin-bottom: 20px; }
.ai-section-title { font-size: 1.125rem; font-weight: 800; color: #1a1a1f; letter-spacing: -.5px; margin-bottom: 4px; }
.ai-section-sub { font-size: 0.875rem; color: #9a9aa6; }
.ua-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ua-title { font-size: 1.125rem; font-weight: 800; color: #1a1a1f; letter-spacing: -.5px; }
.ua-sub { font-size: 0.875rem; color: #9a9aa6; margin-top: 2px; }

.factor-cat-block { margin-bottom: 16px; }
.factor-cat-title { font-size: 0.875rem; font-weight: 700; color: #9a9aa6; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.factor-cat-title::after { content:''; flex:1; height:1px; background:#eaeaef; }
.factor-row { background: #ffffff; border: 1px solid #eaeaef; border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.factor-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.factor-row-icon { font-size: 0.9375rem; flex-shrink: 0; }
.factor-row-name { font-size: 0.875rem; font-weight: 700; color: #4a4a52; flex: 1; }
.factor-verdict { font-size: 0.8125rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: .4px; }
.factor-verdict.win-a { background: rgba(34,192,155,.15); color: #22C09B; }
.factor-verdict.win-b { background: rgba(90,119,249,.15); color: #5A77F9; }
.factor-verdict.tie   { background: rgba(0,0,0,.05); color: #8a8a96; }
.factor-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.factor-bar-side { background: #f7f7f9; border-radius: 10px; padding: 14px 16px; }
.factor-bar-label { font-size: 0.875rem; font-weight: 700; color: #7a7a86; margin-bottom: 12px; letter-spacing: .3px; }
.factor-bar-track { height: 8px; background: #eaeaef; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.factor-bar-fill { height: 100%; border-radius: 4px; transition: width .7s ease; }
.fill-a { background: linear-gradient(90deg,#22C09B,#5BD4B5); }
.fill-b { background: linear-gradient(90deg,#5A77F9,#7B91FB); }
.fill-a.winner { background: linear-gradient(90deg,#22C09B,#5BD4B5); }
.fill-b.winner { background: linear-gradient(90deg,#5A77F9,#7B91FB); }
.factor-bar-val { font-size: 0.875rem; font-weight: 700; color: #8a8a96; }
.factor-bar-val.winner { color: #3a3a42; }
.factor-insight { font-size: 0.9375rem; color: #9a9aa6; line-height: 1.5; }

.summary-bar { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.summary-winner-tag { font-size: 0.9375rem; font-weight: 800; letter-spacing: .3px; }
.summary-scores { display: flex; gap: 12px; margin-left: auto; }
.summary-score-item { text-align: center; }
.summary-score-num { font-size: 1.25rem; font-weight: 900; letter-spacing: -1px; }
.summary-score-lbl { font-size: 0.8125rem; color: #9a9aa6; }

/* ── Paywall Modal ── */
.paywall-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,15,40,.45);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.paywall-overlay.show { display: flex; }
.paywall-modal {
  background: #ffffff; border: 1px solid rgba(139,87,237,.3);
  border-radius: 28px; padding: 48px 40px; max-width: 720px; width: 92%;
  text-align: center; position: relative;
  box-shadow: 0 40px 80px rgba(20,15,40,.18);
  max-height: 92vh; overflow-y: auto;
}
@media (max-width: 560px) {
  .paywall-modal { padding: 36px 24px; }
}
.paywall-modal::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: radial-gradient(ellipse at 50% -10%, rgba(139,87,237,.14), transparent 65%);
  pointer-events: none;
}
.paywall-icon { font-size: 3rem; margin-bottom: 16px; }
.paywall-title { font-size: 1.625rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 10px; }
.paywall-sub { font-size: 0.875rem; color: #8a8a96; line-height: 1.65; margin-bottom: 28px; letter-spacing: -.2px; }
.paywall-sub strong { color: #4a4a52; }
.paywall-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; margin-top: 16px; }
@media (max-width: 560px) { .paywall-plans { grid-template-columns: 1fr; gap: 10px; } }
.paywall-plan { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 16px; padding: 22px 16px 18px; cursor: pointer; transition: border-color .2s; position: relative; min-width: 0; }
.paywall-plan-meta { font-size: 0.8125rem; color: #8a8a96; margin-top: 10px; font-weight: 600; padding-top: 10px; border-top: 1px solid #eaeaef; }
.paywall-plan-badge.premium { background: #F66BDA; }
.paywall-plan:hover { border-color: rgba(139,87,237,.5); }
.paywall-plan.selected { border-color: #8B57ED; background: rgba(139,87,237,.06); }
.paywall-plan-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #8B57ED; color: #fff; font-size: 0.8125rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; white-space: nowrap; }
.paywall-plan-name { font-size: 0.875rem; color: #8a8a96; margin-bottom: 6px; font-weight: 700; }
.paywall-plan-price { font-size: 1.625rem; font-weight: 900; letter-spacing: -1px; color: #1a1a1f; line-height: 1.1; }
.paywall-plan-period { font-size: 0.8125rem; color: #9a9aa6; margin-top: 4px; line-height: 1.4; word-break: keep-all; }
.paywall-plan-save { display: inline-block; margin-top: 4px; font-size: 0.875rem; font-weight: 700; color: #22C09B; background: rgba(34,192,155,.1); border: 1px solid rgba(34,192,155,.2); padding: 1px 7px; border-radius: 4px; }
.btn-paywall-cta { width: 100%; padding: 15px; border-radius: 14px; border: none; background: linear-gradient(135deg, #8B57ED, #A989F0); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: opacity .15s; letter-spacing: -.3px; margin-bottom: 14px; }
.btn-paywall-cta:hover { opacity: .88; }
.paywall-features { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: #9a9aa6; margin-bottom: 16px; }
.paywall-features span { display: flex; align-items: center; gap: 4px; }
.paywall-features span::before { content: '✓'; color: #22C09B; font-weight: 700; }
.paywall-dismiss { font-size: 0.875rem; color: #aaaab3; cursor: pointer; background: none; border: none; font-family: inherit; transition: color .15s; }
.paywall-dismiss:hover { color: #7a7a86; }

/* ── Claude AI 분석 ── */
.ai-analysis-wrap { margin-top: 0; }
.btn-ai-analyze {
  width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(139,87,237,.3);
  background: rgba(139,87,237,.08); color: #A989F0; font-family: inherit;
  font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: all .18s; letter-spacing: -.3px;
}
.btn-ai-analyze:hover:not(:disabled) { background: rgba(139,87,237,.16); border-color: #A989F0; }
.btn-ai-analyze:disabled { opacity: .35; cursor: not-allowed; }

.ai-loading { display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 24px; color: #8a8a96; font-size: 0.875rem; }
.ai-loading-spinner {
  width: 18px; height: 18px; border: 2px solid #e5e5ea; border-top-color: #A989F0;
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-result { background: #ffffff; border: 1px solid #e5e5ea; border-radius: 20px; padding: 28px; margin-top: 0; }
.ai-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ai-result-title { font-size: 1rem; font-weight: 700; color: #555560; }
.ai-winner { font-size: 1.0625rem; font-weight: 900; color: #22C09B; }
.ai-reason { font-size: 0.9375rem; color: #6b6b76; margin-bottom: 24px; line-height: 1.7; }

.ai-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.ai-score-card { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 14px; padding: 22px; }
.ai-score-tag { font-size: 0.875rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; margin-bottom: 16px; display: inline-block; }
.ai-score-tag-a { background: rgba(34,192,155,.14); color: #22C09B; }
.ai-score-tag-b { background: rgba(90,119,249,.14); color: #5A77F9; }
.ai-score-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.ai-score-row:last-child { margin-bottom: 0; }
.ai-score-lbl { font-size: 0.9375rem; color: #6b6b76; min-width: 80px; }
.ai-score-bar-wrap { flex: 1; margin: 0 14px; height: 8px; background: #e5e5ea; border-radius: 4px; overflow: hidden; }
.ai-score-bar { height: 100%; border-radius: 4px; transition: width .6s ease; }
.ai-score-bar-a { background: #22C09B; }
.ai-score-bar-b { background: #5A77F9; }
.ai-score-num { font-size: 0.9375rem; font-weight: 700; color: #3a3a42; width: 40px; text-align: right; }

.ai-feedbacks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ai-feedback { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 12px; padding: 18px; font-size: 0.9375rem; color: #6b6b76; line-height: 1.7; }
.ai-feedback strong { color: #3a3a42; display: block; margin-bottom: 8px; }

.ai-tip { background: rgba(34,192,155,.06); border: 1px solid rgba(34,192,155,.18);
  border-radius: 12px; padding: 18px 20px; font-size: 0.9375rem; color: #22C09B; line-height: 1.7; }
.ai-tip::before { content: '💡 '; }

/* ── 결과 아코디언 섹션 ── */
.result-accordion {
  background: #ffffff; border: 1px solid #e5e5ea;
  border-radius: 20px; margin-top: 16px; overflow: hidden;
}
.accordion-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; cursor: pointer;
  transition: background .15s; user-select: none;
}
.accordion-header:hover { background: rgba(0,0,0,.03); }
.accordion-icon { font-size: 1rem; }
.accordion-title { font-size: 0.9375rem; font-weight: 700; flex: 1; }
.accordion-arrow { font-size: 0.9375rem; color: #9a9aa6; transition: transform .25s; }
.result-accordion.open .accordion-arrow { transform: rotate(180deg); }
.accordion-body {
  max-height: 0; overflow: hidden;
  /* 닫힘은 느리게 — 콘페티 역재생 보이도록 */
  transition: max-height .65s cubic-bezier(.6,0,.2,1), padding .65s ease;
  padding: 0 20px;
}
.result-accordion.open .accordion-body {
  max-height: 9999px;
  padding: 0 20px 20px;
  /* 열림은 빠르게 */
  transition: max-height .35s ease, padding .35s ease;
}

/* ── 비회원 잠금 오버레이 (winner-card / ai-locked-card 공용) ── */
.winner-card { position: relative; }
.winner-card .lock-overlay { display: none; }
.winner-card.locked .winner-content {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  -webkit-user-select: none;
}
.winner-card.locked .lock-overlay { display: flex; }

.lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; z-index: 5;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
}
.lock-icon { font-size: 1.75rem; }
.lock-text { font-size: 0.9375rem; font-weight: 800; color: #1a1a1f; letter-spacing: -.3px; text-align: center; padding: 0 16px; }
.lock-cta {
  background: linear-gradient(135deg, #8B57ED, #A989F0);
  color: #fff; border: none; font-family: inherit;
  font-size: 0.875rem; font-weight: 700;
  padding: 10px 20px; border-radius: 10px; cursor: pointer;
  transition: opacity .15s, transform .15s; letter-spacing: -.2px;
  display: inline-flex; align-items: center;
  box-shadow: 0 6px 20px rgba(139,87,237,.35);
}
.lock-cta:hover { opacity: .92; transform: translateY(-1px); }

/* 픽셀 분석 부분 잠금 (10개까지만 보이고 아래는 페이드 + CTA) */
.ui-analysis.locked { position: relative; max-height: 920px; overflow: hidden; padding-bottom: 0; }
.ui-analysis.locked .factor-fade {
  display: flex !important;
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 280px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, #ffffff 75%);
  align-items: flex-end; justify-content: center;
  padding: 0 24px 28px;
  z-index: 3;
}
.factor-fade-cta {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #ffffff; border: 1px solid #e5e5ea; border-radius: 16px;
  padding: 20px 28px; box-shadow: 0 8px 24px rgba(20,15,40,.08);
}

/* AI 잠금 카드 (실제 API 호출 안 함, 시각적 mock 만) */
.ai-locked-card {
  position: relative;
  background: #ffffff; border: 1px solid #e5e5ea; border-radius: 20px;
  padding: 28px; margin-top: 16px; min-height: 260px;
}
.ai-locked-mock { filter: blur(8px); user-select: none; pointer-events: none; }
.mock-tag { font-size: 1rem; font-weight: 700; color: #555560; margin-bottom: 14px; }
.mock-line { height: 10px; background: #e5e5ea; border-radius: 5px; margin-bottom: 8px; }
.mock-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.mock-score-card { background: #f7f7f9; border: 1px solid #eaeaef; border-radius: 14px; padding: 20px; }
.mock-score-tag { display: inline-block; font-size: 0.8125rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; margin-bottom: 14px; }
.mock-tag-a { background: rgba(34,192,155,.14); color: #22C09B; }
.mock-tag-b { background: rgba(90,119,249,.14); color: #5A77F9; }
.mock-bar { height: 8px; background: linear-gradient(90deg, #c4c4cc 0%, #e5e5ea var(--w, 50%), transparent var(--w, 50%)); border-radius: 4px; margin-bottom: 12px; }

/* ── 빈 상태 + 콘페티 ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 20px 44px; gap: 18px;
}
.empty-msg {
  font-size: 0.9375rem; font-weight: 700; color: #6b6b76; letter-spacing: -.2px;
}
.empty-confetti {
  position: relative; width: 140px; height: 80px;
}
.confetti-shape {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  --tx: 0px; --ty: 0px; --rot: 0deg; --delay: 0s; --size: 16px;
  width: var(--size); height: var(--size);
}
.shape-circle   { --tx: -54px; --ty: -18px; --rot: 180deg; --delay: .00s; --size: 14px;
                  background: #8B57ED; border-radius: 50%; }
.shape-square   { --tx:  46px; --ty: -22px; --rot: 30deg;  --delay: .05s; --size: 12px;
                  background: #22C09B; border-radius: 3px; }
.shape-triangle { --tx: -22px; --ty:  26px; --rot: -45deg; --delay: .08s; --size: 18px;
                  width: 0; height: 0;
                  border-left: 9px solid transparent; border-right: 9px solid transparent;
                  border-bottom: 16px solid #5A77F9; background: transparent; }
.shape-diamond  { --tx:  28px; --ty:  18px; --rot: 90deg;  --delay: .12s; --size: 14px;
                  background: #F66BDA; transform-origin: center; }
.shape-pill     { --tx:   2px; --ty: -28px; --rot: -20deg; --delay: .03s; --size: 10px;
                  width: 22px; height: 8px;
                  background: #A989F0; border-radius: 999px; }

.empty-state.burst .confetti-shape {
  animation: confettiBurst .9s cubic-bezier(.22,.85,.3,1.1) var(--delay) forwards;
}
.empty-state.burst .shape-diamond {
  animation: confettiBurstDiamond .9s cubic-bezier(.22,.85,.3,1.1) var(--delay) forwards;
}
/* 닫힘 — 콘페티 원래 위치로 되돌아감 */
.empty-state.return .confetti-shape {
  animation: confettiReturn .5s cubic-bezier(.55,0,.6,.4) forwards;
}
.empty-state.return .shape-diamond {
  animation: confettiReturnDiamond .5s cubic-bezier(.55,0,.6,.4) forwards;
}
@keyframes confettiBurst {
  0%   { transform: translate(-50%, -50%) translate(0,0) rotate(0deg) scale(0);   opacity: 0; }
  30%  { transform: translate(-50%, -50%) translate(calc(var(--tx)*.55), calc(var(--ty)*.55)) rotate(calc(var(--rot)*.5)) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
         opacity: 1; }
}
/* 다이아몬드는 기본 회전 45° 적용 */
@keyframes confettiBurstDiamond {
  0%   { transform: translate(-50%, -50%) translate(0,0) rotate(45deg) scale(0);   opacity: 0; }
  30%  { transform: translate(-50%, -50%) translate(calc(var(--tx)*.55), calc(var(--ty)*.55)) rotate(calc(45deg + var(--rot)*.5)) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(calc(45deg + var(--rot))) scale(1);
         opacity: 1; }
}
/* 역재생 키프레임 */
@keyframes confettiReturn {
  0%   { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(0,0) rotate(0deg) scale(0); opacity: 0; }
}
@keyframes confettiReturnDiamond {
  0%   { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(calc(45deg + var(--rot))) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(0,0) rotate(45deg) scale(0); opacity: 0; }
}
/* burst 끝난 후 정지 상태로 유지 */
.empty-state .confetti-shape { will-change: transform, opacity; }