/* Ordinary Edition Design System v3 — tokens + components
   정본: _source/Ordinary Edition Design System v3.dc.html (Claude Design, 2026-10) */

/* ── 01 TOKENS ─────────────────────────────────────────── */
:root{
  /* neutral */
  --white:#ffffff; --paper:#fafafa; --gray-100:#ededeb; --gray-300:#d4d4d2;
  --gray-400:#a8a8a6; --gray-600:#6b6b69; --gray-800:#333331; --ink:#0e0e0e;
  /* brand */
  --green:#51ee30; --logo-green:#17c000; --green-50:#eafde5; --green-700:#0e7a00;
  /* semantic */
  --success:#0e7a00; --error:#c62f1f; --notice:#b26a00;
  --success-tint:#eef6ec; --error-tint:#fbefed; --notice-tint:#fbf3e6;
  /* type */
  --sans:Pretendard,system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  /* layout */
  --max:1280px; --gutter:24px; --margin:40px;
  /* motion */
  --instant:100ms ease-out;
  --snappy:240ms cubic-bezier(.2,.8,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --spring:linear(0, 0.04 2.5%, 0.16 5.5%, 0.5 12%, 0.78 19%, 0.94 26%, 1.03 34%, 1.05 40%, 1.04 47%, 1.01 58%, 0.995 70%, 1);
  --jelly:linear(0, 0.06 3%, 0.26 7%, 0.7 14%, 1.02 21%, 1.14 27%, 1.13 32%, 1.04 41%, 0.97 50%, 0.96 56%, 0.99 67%, 1.01 78%, 1);
  /* lens glass */
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 18px rgba(255,255,255,.14),0 10px 30px -8px rgba(14,14,14,.30),0 2px 6px rgba(14,14,14,.10);
  --float-sh:0 10px 30px -8px rgba(14,14,14,.30),0 2px 6px rgba(14,14,14,.10);
}
@media (max-width:1199px){:root{--gutter:20px;--margin:32px}}
@media (max-width:767px){:root{--gutter:16px;--margin:20px}}

/* ── BASE ──────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}a:hover{color:var(--green-700)}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}

/* ── TYPE ──────────────────────────────────────────────── */
.t-display{font-size:72px;line-height:1.08;font-weight:600;letter-spacing:-.035em}
.t-h1{font-size:48px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.t-h2{font-size:36px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.t-h3{font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.t-body-l{font-size:18px;line-height:1.75;color:var(--gray-800)}
.t-body{font-size:16px;line-height:1.7;color:var(--gray-800)}
.t-caption{font-size:14px;line-height:1.6;color:var(--gray-600)}
.t-meta{font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:12px;color:var(--gray-600)}
@media (max-width:767px){.t-display{font-size:44px}.t-h1{font-size:34px}.t-h2{font-size:28px}}

/* ── LENS GLASS (떠 있는 요소 전용) ───────────────────── */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.10));backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--glass-sh)}
.glass--frost{background:linear-gradient(160deg,rgba(252,252,251,.82),rgba(250,250,250,.66));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
.glass--ink{background:linear-gradient(160deg,rgba(46,46,44,.74),rgba(14,14,14,.64));color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),var(--float-sh)}
.glass--signal{background:linear-gradient(160deg,rgba(138,246,112,.92),rgba(81,238,48,.82));color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.3),inset 0 -6px 14px rgba(20,120,0,.16),var(--float-sh)}
/* 유리 손잡이(세그먼트·탭바 하이라이트) */
.glass-knob{border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px -2px rgba(14,14,14,.22)}

/* 사진 대용 면 */
.photo-standin{position:relative;background:radial-gradient(60% 70% at 18% 30%,#f4b25e 0,rgba(244,178,94,0) 70%),radial-gradient(50% 60% at 82% 18%,#8fb3d1 0,rgba(143,179,209,0) 70%),radial-gradient(60% 60% at 70% 88%,#36604a 0,rgba(54,96,74,0) 70%),radial-gradient(45% 50% at 8% 92%,#b8553a 0,rgba(184,85,58,0) 70%),#d8c6a6}
.photo-standin::before,.photo-standin::after{content:"";position:absolute;background:#1d1a16}
.photo-standin::before{top:0;bottom:0;left:31%;width:10px}
.photo-standin::after{left:0;right:0;top:46%;height:10px}
.photo-standin>.ps-bar{position:absolute;top:0;bottom:0;left:63%;width:10px;background:#1d1a16}
.photo-standin>.ps-tag{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:11px;color:#1d1a16}
.ph{background:repeating-linear-gradient(135deg,var(--gray-100) 0 10px,#e4e4e2 10px 20px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--gray-600)}

/* ── BUTTON (모두 캡슐) ───────────────────────────────── */
.btn{--h:52px;height:var(--h);padding:0 28px;border-radius:999px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background 240ms ease-out,color 240ms ease-out,box-shadow 500ms var(--expo)}
.btn--l{--h:60px;padding:0 36px;font-size:17px}
.btn--s{--h:40px;padding:0 18px;font-size:14px}
.btn--icon{width:var(--h);padding:0}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--green);color:var(--ink);box-shadow:calc(var(--ax,0)*1px) calc(var(--ay,0)*1px + 12px) 26px -10px rgba(81,238,48,.34)}
.btn--secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink),calc(var(--ax,0)*1px) calc(var(--ay,0)*1px + 12px) 26px -10px rgba(14,14,14,.16)}
.btn:disabled{cursor:default;box-shadow:none}
.btn--primary:disabled{background:var(--gray-300);color:var(--gray-600)}
.btn--secondary:disabled{background:transparent;color:var(--gray-400);box-shadow:inset 0 0 0 1px var(--gray-300)}
.btn--link{height:44px;padding:0 2px;border-radius:0;background:transparent;border-bottom:2px solid var(--green);color:var(--ink)}
.btn--link:hover{background:var(--green-50)}
.btn--link:disabled{color:var(--gray-400);border-bottom-color:var(--gray-300)}
/* 사진 위 유리 버튼: hover 부풂, press 눌림 → Jelly 복귀 */
.btn.glass,.btn.glass--ink,.btn.glass--signal{transition:transform 520ms var(--jelly)}
.btn.glass:hover,.btn.glass--signal:hover{transform:scale(1.04)}
.btn.glass:active,.btn.glass--signal:active{transform:scale(.92);transition:transform var(--instant)}
.btn--icon.glass:hover{transform:scale(1.08)}.btn--icon.glass:active{transform:scale(.88)}

/* ── CHIP · BADGE · STATUS ────────────────────────────── */
.chip{height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;box-shadow:inset 0 0 0 1px var(--gray-300);background:transparent;border:0;cursor:pointer;transition:background var(--snappy),color var(--snappy)}
.chip[aria-pressed=true],.chip.is-on{background:var(--ink);color:var(--paper);box-shadow:none}
.badge{height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;white-space:nowrap}
.status{height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--gray-100)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gray-600)}
.status--success{background:var(--success-tint)}.status--success::before{background:var(--success)}
.status--error{background:var(--error-tint)}.status--error::before{background:var(--error)}
.status--notice{background:var(--notice-tint)}.status--notice::before{background:var(--notice)}
.pill{height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;font-weight:600;white-space:nowrap;background:var(--gray-100);color:var(--gray-600)}
.pill--ok{background:var(--green-50);color:var(--ink)}.pill--ink{background:var(--ink);color:var(--paper)}

/* ── BANNER · FIELD MESSAGE · PROGRESS ────────────────── */
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 20px;border-top:1px solid var(--c);background:var(--t)}
.banner--success{--c:var(--success);--t:var(--success-tint)}.banner--error{--c:var(--error);--t:var(--error-tint)}.banner--notice{--c:var(--notice);--t:var(--notice-tint)}
.banner>svg{color:var(--c)}
.banner__title{font-size:15px;font-weight:600}
.banner__text{font-size:14px;line-height:1.6;color:var(--gray-800)}
.banner__act{font-size:14px;font-weight:600;border-bottom:2px solid var(--c);padding-bottom:2px;white-space:nowrap;cursor:pointer}
.msg{display:flex;align-items:center;gap:8px;font-size:13px}
.msg--success{color:var(--success)}.msg--error{color:var(--error)}.msg--notice{color:var(--notice)}
.progress{height:6px;border-radius:999px;background:var(--gray-100);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--green)}

/* ── FORM ──────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:13px;font-weight:500;color:var(--gray-800)}
.field__hint{font-size:13px;color:var(--gray-600)}
.input{height:52px;border:1px solid var(--gray-600);border-radius:999px;background:var(--white);font:inherit;font-size:16px;padding:0 20px;outline:none;transition:border-color var(--snappy);width:100%}
.input:hover{border-color:var(--ink)}
.input:focus,.input.is-focus{border-color:var(--green-700)}
.input[aria-invalid=true]{border-color:var(--error)}
.input[aria-invalid=true]~.field__hint{color:var(--error)}
.input:disabled{border:1px dashed var(--gray-300);background:#f4f4f2}
.field:has(.input:disabled) .field__label,.field:has(.input:disabled) .field__hint{color:var(--gray-400)}
.radio{display:flex;align-items:center;gap:12px;font-size:15px;cursor:pointer}
.radio input{appearance:none;margin:0;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.radio input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform 320ms var(--jelly)}
.radio input:checked::after{transform:scale(1)}
.stepper{display:flex;align-items:stretch;height:52px;width:156px;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.stepper button{width:48px;background:transparent;border:0;font-size:20px;cursor:pointer}
.stepper output{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;border-left:1px solid var(--gray-300);border-right:1px solid var(--gray-300)}
/* 세그먼트: 유리 손잡이가 늘어나며 미끄러짐 */
.seg{position:relative;height:48px;padding:4px;border-radius:999px;display:flex}
.seg__knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,3));transform:translateX(calc(var(--i,0) * 100%)) scale(var(--sx,1),var(--sy,1));transition:transform 560ms var(--jelly)}
.seg.is-moving .seg__knob{--sx:1.14;--sy:.88}
.seg button{position:relative;z-index:1;flex:1;height:40px;border:0;background:transparent;font-size:14px;font-weight:600;cursor:pointer}
/* 토글: 누르는 동안 손잡이가 유리로 부풂 */
.toggle{position:relative;width:64px;height:32px;border:0;border-radius:999px;background:var(--gray-300);cursor:pointer;padding:0;transition:background var(--snappy)}
.toggle[aria-checked=true]{background:var(--green)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:40px;height:28px;border-radius:999px;background:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 18px rgba(255,255,255,.14),0 3px 8px rgba(14,14,14,.25);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);transition:transform 520ms var(--jelly),background 160ms ease-out}
.toggle[aria-checked=true]::after{transform:translateX(20px)}
.toggle:active::after{background:rgba(255,255,255,.35);transform:translateX(var(--tx,0)) scale(1.35,1.25)}
.toggle[aria-checked=true]:active::after{--tx:20px}

/* ── CARD (호버 시 브래킷 초점) ───────────────────────── */
.card{display:flex;flex-direction:column;gap:12px;cursor:pointer;color:inherit;text-decoration:none}
.card__img{position:relative;aspect-ratio:4/5;overflow:hidden}
.card__img>img{width:100%;height:100%;object-fit:cover}
.card__badge{position:absolute;top:18px;left:50%;transform:translateX(-50%)}
.card__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--gray-600)}
.card__foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--ink);padding-top:12px}
.card__title{font-size:18px;font-weight:600}
.card__price{font-size:16px}
.brackets{position:absolute;inset:16px;pointer-events:none;opacity:0;transform:scale(1.06);transition:transform 1100ms var(--expo),opacity 700ms var(--expo)}
.card:hover .brackets,.card:focus-visible .brackets{opacity:1;transform:scale(1)}
.brackets>i,.focus-frame>i{position:absolute;width:var(--b,22px);height:var(--b,22px);border:0 solid var(--green)}
.brackets>i:nth-child(1),.focus-frame>i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px}
.brackets>i:nth-child(2),.focus-frame>i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px}
.brackets>i:nth-child(3),.focus-frame>i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.brackets>i:nth-child(4),.focus-frame>i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.focus-frame{position:absolute;--b:18px;animation:oe-focus 2.5s infinite}
@keyframes oe-focus{0%,28%{opacity:1}64%{opacity:.1}100%{opacity:1}}

/* ── LIST (세계관 인덱스) ─────────────────────────────── */
.wlist{display:flex;flex-direction:column}
.wlist__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 12px;border:0;border-top:1px solid var(--gray-300);background:rgba(237,237,235,0);cursor:pointer;user-select:none;text-align:left;font:inherit;color:inherit;transition:background 320ms var(--expo)}
.wlist__row:first-child{border-top-color:var(--ink)}
.wlist__row:last-child{border-bottom:1px solid var(--gray-300)}
.wlist__row:hover,.wlist__row[aria-selected=true]{background:var(--gray-100)}
.wlist__row:active{background:var(--gray-300)}
.wlist__code{font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:8px}
.wlist__code::before{content:"";width:6px;height:6px;background:var(--green);transform:scale(0);transition:transform 600ms var(--jelly)}
.wlist__body{display:flex;flex-direction:column;gap:4px;transition:transform 800ms var(--expo)}
.wlist__body b{font-size:18px;font-weight:600}
.wlist__body span{font-size:14px;color:var(--gray-600)}
.wlist__arrow{display:flex;transition:transform 600ms var(--spring)}
.wlist__row:hover .wlist__arrow{transform:translate(3px,-3px)}
.wlist__row[aria-selected=true] .wlist__code::before{transform:scale(1)}
.wlist__row[aria-selected=true] .wlist__body{transform:translateX(8px)}
.wlist__row[aria-selected=true] .wlist__arrow{transform:rotate(45deg)}

/* ── TABLE ─────────────────────────────────────────────── */
.tbl{overflow-x:auto}
.tbl__in{border-top:1px solid var(--ink)}
.tbl__row{display:grid;grid-template-columns:var(--cols);align-items:center;border-bottom:1px solid var(--gray-300);transition:background 320ms var(--expo)}
.tbl__row:last-child{border-bottom-color:var(--ink)}
.tbl__row:not(.tbl__head):hover{background:var(--gray-100)}
.tbl__row>*{padding:16px}
.tbl__head>*{padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--gray-600)}
.tbl__row .r{text-align:right}.tbl__row .c{display:flex;justify-content:center}
.tbl .rec{background:rgba(81,238,48,.06)}
.tbl .na{color:var(--gray-400)}

/* ── NAV ───────────────────────────────────────────────── */
.hdr{display:flex;justify-content:space-between;align-items:center;gap:24px;height:72px;padding:0 24px;background:var(--paper);box-shadow:inset 0 -1px 0 var(--ink);overflow:hidden;transition:margin 600ms var(--jelly),height 600ms var(--jelly),padding 600ms var(--jelly),border-radius 600ms var(--jelly),box-shadow 240ms ease-out}
.hdr__logo{height:18px;width:auto;flex-shrink:0}
.hdr__menu{display:flex;gap:28px;font-size:15px;white-space:nowrap}
.hdr__menu a{text-decoration:none;display:flex;align-items:center;gap:6px}
.hdr__menu a[aria-current]::before{content:"";width:6px;height:6px;background:var(--green)}
.hdr__tools{display:flex;gap:16px;align-items:center;flex-shrink:0}
/* 스크롤하면 유리 캡슐로 떠오름 */
.hdr.is-floating{margin:16px 20px 0;height:56px;padding:0 10px 0 22px;border-radius:999px;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.22));backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.3),var(--float-sh)}
.hdr-sticky{position:sticky;top:0;z-index:20;height:0;display:flow-root}
.tabs{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-bottom:1px solid var(--gray-300)}
.tabs button{height:48px;border:0;background:transparent;font-size:15px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:color var(--snappy)}
.tabs button[aria-selected=true]{color:var(--ink)}
.tabs__bar{position:absolute;left:0;bottom:-1px;width:calc(100% / var(--n,4));height:2px;background:var(--ink);transform:translateX(calc(var(--i,0) * 100%));transition:transform 560ms var(--jelly)}
.crumb{display:flex;gap:8px;font-family:var(--mono);font-size:13px;color:var(--gray-600)}
.crumb :last-child{color:var(--ink)}
.pager{display:flex;gap:4px;font-family:var(--mono);font-size:14px}
.pager>*{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none}
.pager [aria-current]{background:var(--ink);color:var(--paper)}
.fund-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:44px;padding:0 16px;background:var(--green);color:var(--ink);font-size:14px;font-weight:500}
.tabbar{position:relative;height:64px;padding:4px;border-radius:999px;display:flex}
.tabbar__knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,4));transform:translateX(calc(var(--i,0) * 100%));transition:transform 600ms var(--jelly)}
.tabbar button{position:relative;z-index:1;flex:1;height:56px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;cursor:pointer;transition:transform 420ms var(--jelly)}
.tabbar button:active{transform:scale(.88)}
.ftr{background:var(--ink);color:var(--paper);padding:48px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:32px}
.ftr a{color:var(--paper);text-decoration:none}.ftr a:hover{color:var(--green)}
.ftr__col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.ftr__col .label{color:var(--gray-400)}

/* ── OVERLAY ───────────────────────────────────────────── */
.toast{position:absolute;left:50%;height:52px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 16px 0 8px;opacity:0;transform:translate(-50%,-90px) scale(.85);transition:transform 620ms var(--jelly),opacity 200ms ease-out;pointer-events:none;white-space:nowrap}
.toast.is-on{opacity:1;transform:translate(-50%,0) scale(1)}
.toast__ic{width:36px;height:36px;border-radius:999px;background:var(--green);color:var(--ink);display:flex;align-items:center;justify-content:center}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;border-radius:28px;padding:0 20px 20px;display:flex;flex-direction:column;transform:translateY(var(--y,0px));transition:transform 560ms var(--jelly)}
.sheet.is-drag{transition:none}
.sheet__grip{height:36px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.sheet__grip::after{content:"";width:40px;height:5px;border-radius:999px;background:rgba(14,14,14,.25)}
.dim{position:absolute;inset:0;background:rgba(14,14,14,.18);pointer-events:none;transition:opacity 300ms ease-out}

/* ── IMAGE TOOLS ───────────────────────────────────────── */
.compare{position:relative;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none;--p:50%}
.compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.compare__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:rgba(255,255,255,.9)}
.compare__knob{position:absolute;top:50%;left:var(--p);width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--paper);transition:transform 520ms var(--jelly)}
.compare.is-drag .compare__knob{transform:scale(1.18)}
.loupe{position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.loupe__lens{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:999px;overflow:hidden;will-change:transform;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 18px rgba(255,255,255,.14),inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 -10px 24px rgba(255,255,255,.25),0 18px 40px -10px rgba(14,14,14,.45),0 3px 8px rgba(14,14,14,.15)}
.loupe__inner,.loupe__rim{position:absolute;left:0;top:0;transform-origin:0 0}
.loupe__inner{filter:url(#oe-refract) saturate(1.15)}
.loupe__rimwrap{position:absolute;inset:0;border-radius:999px;overflow:hidden;-webkit-mask:radial-gradient(circle at 50% 50%,transparent 43px,#000 53px);mask:radial-gradient(circle at 50% 50%,transparent 43px,#000 53px)}
.loupe__rim{filter:url(#oe-refract-rim) saturate(1.5) brightness(1.1) blur(.6px)}
.loupe__fx1{position:absolute;inset:0;border-radius:999px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 44px,rgba(255,255,255,.18) 54px,rgba(255,255,255,0) 60px)}
.loupe__fx2{position:absolute;inset:0;border-radius:999px;background:conic-gradient(from 200deg,rgba(255,255,255,.95),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 44%,rgba(180,220,255,.55) 54%,rgba(255,255,255,0) 66%,rgba(255,236,200,.5) 86%,rgba(255,255,255,.95));-webkit-mask:radial-gradient(circle at 50% 50%,transparent 56px,#000 58.5px);mask:radial-gradient(circle at 50% 50%,transparent 56px,#000 58.5px)}
.loupe__fx3{position:absolute;inset:0;border-radius:999px;background:radial-gradient(80% 60% at 30% 18%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%)}

/* ── REDUCE MOTION: 스프링 대신 페이드 ────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation:none!important}
  .toast{transition:opacity 200ms!important}
}