:root{--bg:#1b1f1b;--bg-raised:#20241f;--line:#333a31;--text:#ede8dc;--text-muted:#8b9186;--accent:#c9a227;--accent-dim:#6e5c1f;--moss:#5c7a63;--error:#b25a4a}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:IBM Plex Sans KR,-apple-system,sans-serif}body{min-height:100vh;padding:28px 32px 64px}main{max-width:960px;margin:0 auto}header{margin-bottom:20px}h1{letter-spacing:-.01em;margin:0 0 4px;font-family:Fraunces,serif;font-size:19px;font-weight:600}header p{color:var(--text-muted);margin:0;font-size:12px;line-height:1.5}.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr 1.2fr;display:grid}.stat{border-left:1px solid var(--line);padding:12px 16px}.stat:first-child{border-left:none}.stat-label{color:var(--text-muted);margin:0 0 4px;font-size:11px}.stat-value{font-variant-numeric:tabular-nums;margin:0;font-family:Fraunces,serif;font-size:22px;font-weight:400;line-height:1}.stat-value .unit{color:var(--text-muted);margin-left:4px;font-family:IBM Plex Sans KR,sans-serif;font-size:12px}.stat--rate .stat-value{color:var(--accent);font-style:italic}.stat-sub{color:var(--text-muted);margin:4px 0 0;font-size:11px}.stat-sub strong{color:var(--text);font-weight:500}.trail{margin-top:14px}.trail-heading{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.trail-heading span:first-child{color:var(--text-muted);font-size:11px}.trail-heading span:last-child{color:var(--accent);font-family:Fraunces,serif;font-size:12px;font-style:italic}.trail-track{background-image:repeating-linear-gradient(to right, var(--line) 0px, var(--line) 5px, transparent 5px, transparent 10px);height:2px;position:relative}.trail-fill{background:var(--accent);width:0%;height:2px;transition:width .9s;position:absolute;top:0;left:0}.trail-marker{background:var(--accent);border-radius:50%;width:11px;height:11px;margin-left:-5.5px;transition:left .9s;position:absolute;top:50%;left:0%;transform:translateY(-50%);box-shadow:0 0 0 4px #c9a2272e}@media (prefers-reduced-motion:reduce){.trail-fill,.trail-marker{transition:none}}.trail-endpoints{color:var(--text-muted);justify-content:space-between;margin-top:10px;font-size:12px;display:flex}.state-msg{color:var(--text-muted);padding:40px 0;font-size:14px}.state-msg.is-error{color:var(--error)}[data-state=loaded] .state-msg,[data-state=loading] .stats,[data-state=loading] .trail,[data-state=error] .stats,[data-state=error] .trail{display:none}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=640px){body{padding:24px 20px 48px}.stats{grid-template-columns:1fr}.stat{border-left:none;border-top:1px solid var(--line);padding:10px 4px}.stat:first-child{border-top:none}.stat-value{font-size:20px}}.process{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.process>div{display:none}[data-process-state=idle] .process-idle,[data-process-state=loading] .process-loading,[data-process-state=empty] .process-empty,[data-process-state=error] .process-error,[data-process-state=result] .process-result{display:block}.process-idle{justify-content:space-between;align-items:center;gap:24px;padding:8px 4px;display:flex}.process-question{color:var(--text);margin:0;font-family:Fraunces,serif;font-size:20px;font-style:italic}.btn-start{color:var(--bg);background:var(--accent);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;padding:12px 28px;font-family:IBM Plex Sans KR,sans-serif;font-size:14px;font-weight:500;transition:background .2s,transform .15s}.btn-start:hover{background:#ddb633}.btn-start:active{transform:scale(.97)}.result-header{align-items:baseline;gap:12px;margin-bottom:28px;display:flex}.result-eyebrow{color:var(--text-muted);font-size:13px}.result-uuid{color:var(--accent);word-break:break-all;font-size:13px}.result-images{justify-content:center;align-items:center;gap:16px;margin-bottom:28px;display:flex}.result-images img,.result-images canvas{border:1px solid var(--line);background:var(--bg-raised);object-fit:contain;border-radius:4px;width:100%;max-height:380px;display:block}.result-images.is-single img{max-width:320px}.result-images.is-pair canvas{max-width:420px}.result-images.is-error{flex-direction:column;gap:12px}.image-error-msg{color:var(--error);text-align:center}.btn-retry{color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:6px 18px;font-family:IBM Plex Sans KR,sans-serif;font-size:13px;transition:border-color .15s,color .15s}.btn-retry:hover{border-color:var(--accent);color:var(--accent)}.result-basics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);margin-bottom:32px;display:grid}.basic{border-left:1px solid var(--line);padding:20px}.basic:first-child{border-left:none}.basic-label{color:var(--text-muted);margin:0 0 8px;font-size:13px}.basic-value{font-variant-numeric:tabular-nums;margin:0;font-size:20px}.result-images-row{align-items:stretch;gap:28px;margin-bottom:8px;display:flex}.result-images-row .result-images{flex:1.3;margin-bottom:0}.result-images-row .foot-result{flex-direction:column;flex:1;min-width:0;padding-top:4px;display:flex}.foot-result--left{text-align:right}.foot-result--right{text-align:left}.foot-title{color:var(--accent);flex-shrink:0;margin:0 0 14px;font-family:Fraunces,serif;font-size:16px;font-style:italic}.foot-list{border-top:1px solid var(--line);flex-direction:column;flex:1;justify-content:space-between;margin:0;display:flex}.foot-list div{border-bottom:1px solid var(--line);justify-content:space-between;padding:10px 0;font-size:14px;display:flex}.foot-list dt{color:var(--text-muted)}.foot-list dd{justify-content:flex-end;align-items:center;gap:8px;margin:0;display:flex}.result-existing{color:var(--text);font-variant-numeric:tabular-nums;font-size:14px}.result-input{text-align:center;width:30px;height:26px;color:var(--text);background:var(--bg-raised);border:1px solid var(--line);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;padding:0;font-family:IBM Plex Sans KR,sans-serif;font-size:14px;line-height:1;transition:border-color .15s,background .15s}.result-input:hover{border-color:var(--moss);background:#262b23}.result-input:active{transform:scale(.94)}.result-input.is-changed{border-color:var(--accent);color:var(--accent)}.save-row{border-top:1px solid var(--line);justify-content:flex-end;align-items:center;gap:16px;margin-top:36px;padding-top:24px;display:flex}.save-error{color:var(--error);margin:0;font-size:13px}.btn-start:disabled{opacity:.6;cursor:default}.process-result{position:relative}.save-overlay{z-index:1;background:#1b1f1bf0;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:none;position:absolute;inset:0}.save-overlay.is-visible{display:flex}.save-overlay p{color:var(--text);margin:0;font-family:Fraunces,serif;font-size:15px;font-style:italic}.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:26px;height:26px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{border-top-color:var(--line);animation:none}}@media (width<=640px){.process-idle{flex-direction:column;align-items:flex-start}.result-images{flex-direction:column}.result-images.is-pair canvas{max-width:100%}.result-basics{grid-template-columns:1fr 1fr}.basic:nth-child(3){border-left:none}.basic:nth-child(3),.basic:nth-child(4){border-top:1px solid var(--line)}.result-images-row{flex-direction:column;gap:20px}.result-images-row .result-images{order:-1}.foot-result--left,.foot-result--right{text-align:left}}