/* 그로스: A/B 테스트 — console.css + transfer.css 셸 재사용 */
.ab-tests{display:flex;flex-direction:column;gap:13px;}
.ab-test{background:var(--color-surface,#fff);border:1px solid var(--color-border,#E0D5CC);border-radius:15px;padding:16px 18px;}
.ab-test__h{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px;}
.ab-test__nm{font-size:15px;font-weight:800;color:var(--color-text-strong,#15110E);letter-spacing:-.01em;}
.ab-test__sub{font-size:12px;color:var(--color-text-muted,#6B5F57);margin-top:3px;}
.ab-test__h .tmpill{margin-left:auto;flex:0 0 auto;}
.ab-vars{display:flex;flex-direction:column;gap:9px;}
.ab-var{border:1px solid var(--color-border,#E0D5CC);border-radius:11px;padding:11px 13px;}
.ab-var.is-win{border-color:var(--ok,#1F8A5B);background:var(--ok-bg,#E5F4EC);}
.ab-var__top{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.ab-var__k{width:22px;height:22px;border-radius:6px;background:var(--color-text-strong,#15110E);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:0 0 auto;}
.ab-var.is-win .ab-var__k{background:var(--ok,#1F8A5B);}
.ab-var__nm{font-size:13px;font-weight:700;color:var(--color-text-strong,#15110E);}
.ab-var__badge{font-size:10px;font-weight:800;color:var(--ok,#1F8A5B);background:var(--color-surface,#fff);border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px;}
.ab-var__traffic{margin-left:auto;font-size:11px;color:var(--color-text-subtle,#9A8C82);}
.ab-var__bar{position:relative;height:24px;border-radius:7px;background:var(--color-bg-subtle,#F5EEE9);overflow:hidden;display:flex;align-items:center;}
.ab-var__fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:color-mix(in srgb,var(--color-text-muted,#6B5F57) 18%,transparent);}
.ab-var__fill.is-win{background:color-mix(in srgb,var(--ok,#1F8A5B) 26%,transparent);}
.ab-var__cvr{position:relative;font-size:12.5px;font-weight:800;color:var(--color-text-strong,#15110E);padding-left:9px;}
.ab-var__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:11.5px;color:var(--color-text-muted,#6B5F57);}
.ab-test__sig{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--color-divider,#EDE4DD);}
.ab-sig__lb{font-size:12px;font-weight:700;color:var(--color-text-muted,#6B5F57);}
.ab-sig__bar{width:120px;height:7px;border-radius:999px;background:var(--color-bg-subtle,#F5EEE9);overflow:hidden;}
.ab-sig__fill{height:100%;border-radius:999px;background:var(--amber,#92660C);}
.ab-sig__fill.is-ok{background:var(--ok,#1F8A5B);}
.ab-sig__v{font-size:12.5px;font-weight:800;}
.ab-test__note{font-size:12px;color:var(--color-text-muted,#6B5F57);}
.ab-test__note i{color:var(--ok,#1F8A5B);}
.ab-test__act{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--color-divider,#EDE4DD);flex-wrap:wrap;}
.ab-test__gw{font-size:12px;font-weight:700;color:var(--color-text-muted,#6B5F57);display:inline-flex;align-items:center;gap:7px;}
.ab-test__gw>i{color:var(--ok,#1F8A5B);}

/* A/B 실험 — 2026-08-27 razor <style> 블록에서 회수.
   ⚠️ .ab-sig 는 여기 위쪽에 display:flex 판이 하나 더 있었는데, razor 블록이 <head> 뒤에 주입돼
   페이지에서는 늘 아래 카드 판이 이겼다(레이아웃은 .ab-sig__main 으로 옮겨간 뒤였다).
   회수하면서 죽어 있던 위쪽 정의를 지웠다 — 되살리지 말 것. */
.ab-test__tgt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.ab-test__tgt--link { color: var(--ok, #1F8A5B); background: var(--ok-bg, #E5F4EC); }
.ab-test__tgt--custom { color: var(--color-text-muted, #6B5F57); background: var(--color-surface-muted, #F4EEE8); }
.ab-test__hyp { font-size: 12px; color: var(--color-text-muted, #6B5F57); margin: 8px 0 10px; }
.ab-test__hyp i { color: var(--color-text-subtle, #9A8C82); margin-right: 4px; }
.ab-sig { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border, #E0D5CC); background: var(--color-surface-muted, #F8F4EF); }
.ab-sig--ok { border-color: var(--ok, #1F8A5B); background: var(--ok-bg, #E5F4EC); }
.ab-sig--warn { border-color: var(--amber, #D9A406); background: var(--amber-bg, #FBF3D9); }
.ab-sig--mute { background: var(--color-surface-muted, #F8F4EF); }
.ab-sig__main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--color-text-strong, #15110E); }
.ab-sig--ok .ab-sig__main { color: var(--ok, #1F8A5B); }
.ab-sig--warn .ab-sig__main { color: var(--amber-strong, #92660C); }
.ab-sig--gray .ab-sig__main, .ab-sig--mute .ab-sig__main { color: var(--color-text-muted, #6B5F57); }
.ab-sig__cf { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(15, 17, 14, .06); }
.ab-sig__rs { font-weight: 600; color: var(--color-text-subtle, #9A8C82); }
.ab-sig__note { display: flex; align-items: flex-start; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 500; color: var(--color-text-subtle, #9A8C82); line-height: 1.5; }
.ab-sig__note i { margin-top: 2px; }

.abx-modal__ov { position: fixed; inset: 0; background: rgba(15, 17, 14, .42); display: grid; place-items: center; z-index: 1000; padding: 24px; }
.abx-modal { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E0D5CC); border-radius: 16px; padding: 20px 22px; width: 560px; max-width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 18px 48px rgba(15, 17, 14, .22); }
.abx-modal__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.abx-modal__x { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text-subtle, #9A8C82); padding: 4px; }
.abx-fld { margin-bottom: 12px; }
.abx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abx-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--color-text, #3D342E); margin-bottom: 5px; }
.abx-req { color: var(--rose, #E11D48); }
.abx-hint { font-weight: 600; font-size: 11px; color: var(--color-text-subtle, #9A8C82); }
.abx-in { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border-strong, #D8CCC2); border-radius: 9px; padding: 8px 11px; font-size: 13px; font-family: inherit; color: var(--color-text-strong, #15110E); background: var(--color-surface, #fff); }
.abx-in:focus { outline: none; border-color: var(--ok, #1F8A5B); }
.abx-var { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.abx-in--key { width: 76px; flex: 0 0 auto; text-align: center; font-weight: 700; }
.abx-in--nm { flex: 1 1 auto; }
.abx-traffic { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 12px; color: var(--color-text-muted, #6B5F57); }
.abx-in--tr { width: 64px; text-align: right; }
.abx-var__del { background: none; border: 1px solid var(--color-border, #E0D5CC); border-radius: 8px; width: 32px; height: 32px; flex: 0 0 auto; cursor: pointer; color: var(--color-text-subtle, #9A8C82); }
.abx-var__del:disabled { opacity: .4; cursor: not-allowed; }
.abx-var__del:not(:disabled):hover { border-color: var(--rose, #E11D48); color: var(--rose, #E11D48); }
.abx-modal__ft { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-divider, #EDE4DD); }
