:root{--brand:#024239;--ink:#203c34;--muted:#526e62;--paper:#f8f7f2;--line:#dce3dc;--app-bg:#dce9df;--pending:#785515;--pending-bg:#f6e9cd;--server-bg:#e7eff6;--server-line:#bed0df;--server-ink:#244a67;--error:#8a4335;--error-bg:#f8e7df;--font:"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--paper);color:var(--ink);font-family:var(--font);letter-spacing:-.025em;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,dl,dd{margin:0}h1,h2,h3,h4,p{word-break:keep-all;overflow-wrap:break-word}button,input,select{font:inherit;min-width:0}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ac9359;outline-offset:4px}button[hidden],[hidden]{display:none!important}.cart-demo{max-width:1240px;margin:auto;padding:36px 32px 24px}.demo-intro{max-width:840px;margin-bottom:28px}.eyebrow{font-size:13px;line-height:1.6;font-weight:600;color:var(--muted)}.demo-intro h1{font-size:31px;line-height:1.35;letter-spacing:-.04em;font-weight:650;margin-top:10px;color:var(--brand)}.demo-intro>p:last-child{font-size:16px;line-height:1.75;color:var(--muted);margin-top:14px}.scene-selector{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;padding:20px 0;border-block:1px solid #c7d4c9}.scene-selector label{display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.4;color:var(--muted)}select,input{border:1px solid #a8bcae;background:#fff;color:var(--ink);border-radius:8px;min-height:46px;padding:10px 12px;line-height:1.5;font-size:15px;width:100%}select{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23526e62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:right 14px center}.scene-selector select{font-size:16px;font-weight:550;max-width:500px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;gap:10px;border:1px solid transparent;border-radius:8px;font-size:15px;font-weight:550;line-height:1.5;text-align:center}.secondary{background:#fff;border-color:#a8bcae;color:var(--brand)}.secondary:hover:not(:disabled){background:#edf3ec}.primary{background:var(--brand);border-color:var(--brand);color:#fff}.primary:hover:not(:disabled){background:#0d584b}.next-button{min-width:134px}.full{width:100%}.scene-heading{margin:26px 0 20px;max-width:820px}.scene-heading h2{font-size:24px;line-height:1.4;font-weight:650;margin-top:6px;letter-spacing:-.035em}.scene-heading>p:last-child{font-size:15px;line-height:1.8;color:var(--muted);margin-top:10px}.service-message{font-size:14px;line-height:1.65;border-left:3px solid #86a88d;background:#edf2e8;padding:12px 16px;margin-bottom:22px;overflow-wrap:anywhere}.service-message[data-kind=pending]{background:var(--pending-bg);border-color:#c5a363;color:var(--pending)}.service-message[data-kind=error]{background:var(--error-bg);border-color:#b77863;color:var(--error)}.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}.app-stage{min-width:0;padding:18px;background:var(--app-bg);border:1px solid #c7d7c9;border-radius:18px}.stage-label{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;line-height:1.5}.stage-label h2{font-size:14px;font-weight:650;line-height:1.5}.stage-label>span{font-size:12px;font-weight:400;color:var(--muted);text-align:right}.app-window{border:1px solid #b9ccbe;border-radius:12px;background:#fff;overflow:hidden}.app-header{background:var(--brand);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px}.app-header h3{font-size:18px;font-weight:600;line-height:1.5}.app-header>span{font-size:13px;color:#d0e2d8}.app-content{padding:24px 22px}.product{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:22px}.product-image{display:flex;align-items:center;justify-content:center;background:#f2eee7;border:1px solid #ebe4d9;width:100px;height:88px;border-radius:9px;flex-shrink:0}.desk-mat{position:relative;width:77px;height:52px;background:#bcb2a1;border:1px solid #938774;border-radius:5px;box-shadow:inset 0 0 0 3px #bcb2a1,inset 0 0 0 4px #ab9d86;transform:rotate(-8deg)}.desk-mat span{position:absolute;bottom:7px;right:7px;font-size:6px;font-weight:600;letter-spacing:.1em;color:#675e4f}.product-copy{min-width:0}.product-copy p{font-size:12px;line-height:1.6;color:var(--muted)}.product-copy h4{font-size:22px;line-height:1.45;font-weight:650;margin-top:5px}.product-copy>span{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:7px}.input-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:14px;align-items:end}.input-grid label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;line-height:1.5;font-weight:500}.input-grid select,.input-grid input{height:46px}.input-grid input{text-align:center}.field-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px}.estimate{margin:22px 0 20px;background:#f1f4ed;border:1px solid #dce3d6;border-radius:9px;padding:17px}.estimate>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.estimate>div>span{font-size:13px;line-height:1.5}.estimate strong{font-size:25px;font-weight:650;line-height:1.4;white-space:nowrap;letter-spacing:-.035em}.estimate>p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:6px}.draft-label{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:11px;border-top:1px solid #d7dfd1;padding-top:10px}.estimate[data-dirty=true]{background:var(--pending-bg);border-color:#dfc791}.estimate[data-dirty=true] .draft-label{color:var(--pending);border-color:#e1ceaa;font-weight:550}.save-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px;text-align:center}.server-stage{min-width:0;padding:18px;background:var(--server-bg);border:1px solid var(--server-line);border-radius:18px;color:var(--server-ink)}.server-stage .stage-label>span{color:#5e788b}.server-content{background:#fff;border:1px solid #c6d6e2;border-radius:12px;padding:22px}.server-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.server-heading h3{font-size:20px;line-height:1.5;font-weight:650}.read-state{display:inline-flex;align-items:center;justify-content:center;background:#edf3f7;color:#536f83;border-radius:5px;padding:5px 9px;font-size:12px;line-height:1.5;white-space:nowrap;flex-shrink:0}.read-state[data-kind=pending]{background:var(--pending-bg);color:var(--pending)}.read-state[data-kind=error]{background:var(--error-bg);color:var(--error)}.saved-fields{margin-top:20px}.saved-fields>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #e2e9ed;font-size:15px;line-height:1.5}.saved-fields dt{color:#60778a;font-size:13px}.saved-fields dd{font-weight:550;text-align:right;overflow-wrap:anywhere}.saved-total{padding:23px 0;margin-bottom:20px;border-bottom:1px solid #dbe5ec}.saved-total>span{font-size:13px;line-height:1.5;color:#5e788b}.saved-total strong{display:block;font-size:39px;line-height:1.3;font-weight:650;letter-spacing:-.04em;margin-top:7px}.saved-total p{font-size:13px;line-height:1.6;color:#60778a;margin-top:8px}.server-button{border-color:#adc3d4;background:#f4f8fb;color:var(--server-ink)}.server-button:hover:not(:disabled){background:#e7f0f6}.server-note{font-size:12px;line-height:1.75;color:#60778a;margin-top:12px}.scene-action{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;padding:21px 0;border-block:1px solid var(--line)}.scene-action>div{min-width:0;flex:1}.scene-action>div>p:last-child{font-size:14px;line-height:1.75;color:var(--muted);margin-top:5px}.scene-action>.button{flex-shrink:0;max-width:240px}.request-flow{margin-top:24px}.flow-heading{display:flex;gap:14px;align-items:baseline;justify-content:space-between}.flow-heading h2{font-size:16px;line-height:1.6;font-weight:600}.flow-heading>span{font-size:12px;line-height:1.6;color:var(--muted);text-align:right}.request-flow ol{padding:0;margin:14px 0 0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:flow}.request-flow li{counter-increment:flow;border:1px solid #cfdbcd;border-radius:9px;background:#edf3e9;padding:14px;font-size:14px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}.request-flow li::before{content:counter(flow,decimal-leading-zero);display:block;margin-bottom:6px;color:#6b856e;font-size:12px;font-weight:650;letter-spacing:.02em}.request-flow li.pending{background:var(--pending-bg);border-color:#e4d1a7;color:var(--pending)}.request-flow li.error{background:var(--error-bg);border-color:#e3c9bd;color:var(--error)}.developer-details,.demo-settings{border:1px solid var(--line);border-radius:10px;margin-top:24px;background:rgba(255,255,255,.5)}summary{padding:16px 18px;min-height:48px;cursor:pointer;font-size:14px;line-height:1.6;color:var(--muted)}.details-content,.demo-settings>div{padding:0 18px 20px}.details-content>p,.demo-settings p{font-size:13px;line-height:1.8;color:var(--muted)}.details-content h3{font-size:15px;line-height:1.6;margin-top:22px}.request-details{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}.request-details li{min-width:0;border-top:1px solid var(--line);padding-top:14px}.request-details h4{font-size:13px;line-height:1.6;font-weight:600;overflow-wrap:anywhere}.request-details pre,pre#audit-record{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:#eef1eb;border-radius:6px;padding:12px;margin:9px 0 0;max-height:420px;overflow-y:auto}.demo-settings .text-button{margin-top:13px}.text-button{border:0;background:none;padding:4px 0;color:var(--brand);text-decoration:underline;text-underline-offset:4px;font-size:14px;line-height:1.7;min-height:40px;text-align:left}.demo-footer{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:12px;line-height:1.8;color:var(--muted)}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr)}.cart-demo{padding:30px 24px 24px}.demo-intro h1{font-size:28px}.app-content,.server-content{padding:24px}.product-image{width:104px;height:88px}.scene-action{align-items:flex-start}.scene-action>.button{max-width:220px}}
@media(max-width:560px){.cart-demo{padding:24px 16px 20px}.demo-intro{margin-bottom:22px}.demo-intro h1{font-size:25px}.demo-intro>p:last-child{font-size:15px}.scene-selector{gap:8px;padding:17px 0;grid-template-columns:minmax(0,1fr) 104px}.scene-selector select{font-size:16px;padding-left:10px;max-width:none}.next-button{min-width:0;padding-inline:10px;font-size:13px;gap:5px}.scene-selector label{font-size:12px}.scene-heading{margin-top:23px}.scene-heading h2{font-size:22px}.scene-heading>p:last-child{font-size:14px}.service-message{font-size:13px;padding:11px 13px}.app-stage,.server-stage{padding:13px;border-radius:14px}.stage-label{gap:8px}.stage-label h2{font-size:13px}.stage-label>span{font-size:11px}.app-header{padding:15px 16px}.app-content,.server-content{padding:20px 16px}.product{gap:14px;padding-bottom:21px;margin-bottom:19px}.product-image{width:79px;height:74px}.desk-mat{width:61px;height:43px}.desk-mat span{font-size:5px;bottom:6px;right:5px}.product-copy h4{font-size:20px}.product-copy p,.product-copy>span{font-size:11px}.input-grid{gap:10px;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.input-grid label{font-size:13px}.input-grid select,.input-grid input{font-size:16px}.estimate{padding:14px}.estimate>div{gap:10px;align-items:flex-start;flex-direction:column}.estimate strong{font-size:28px}.estimate>div>span{font-size:12px}.save-note{font-size:11px}.server-heading h3{font-size:19px}.saved-fields>div{grid-template-columns:95px minmax(0,1fr);gap:12px}.saved-total strong{font-size:36px}.scene-action{flex-direction:column;gap:14px}.scene-action>.button{width:100%;max-width:none}.flow-heading{flex-direction:column;gap:4px}.flow-heading>span{text-align:left}.request-flow ol{grid-template-columns:minmax(0,1fr);gap:8px}.request-flow li{display:flex;gap:12px;padding:12px 14px;font-size:13px}.request-flow li::before{margin:0;flex-shrink:0;line-height:1.8}.details-content,.demo-settings>div{padding-inline:14px}.details-content>p,.demo-settings p{font-size:12px}summary{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}