*{box-sizing:border-box}body{margin:0;background:#f1f4ed;color:#173b32;font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1b8977;outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3,p{word-break:keep-all;overflow-wrap:anywhere}.demo{max-width:1160px;margin:auto;padding:24px}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:12px;letter-spacing:.06em;color:#5b776b;font-weight:650}h1{font-size:24px;letter-spacing:-.035em;line-height:1.4;margin-top:6px}.quiet{border:1px solid #b8c8bb;background:#fff;border-radius:8px;padding:9px 13px;font-size:12px;white-space:nowrap;color:#315446}.route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style:none;margin:20px 0;gap:8px}.route li{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid #d1ddd1;border-radius:9px;padding:12px;font-size:12px}.route b{color:#27876f;font-size:11px}.workbench{display:grid;grid-template-columns:300px 68px minmax(0,1fr);align-items:start}.region-label{font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:10px}.app-region{background:#deece3;border:1px solid #b0cbbb;border-radius:17px;padding:16px}.phone{background:white;border:1px solid #a1b9ab;border-radius:15px;overflow:hidden;box-shadow:0 8px 25px #1c473016}.phone-header{padding:17px 16px 14px;background:#fafdf9;border-bottom:1px solid #dfebe0}.phone-header>span{font-size:11px;color:#47725a;font-weight:700}.phone-header h2{font-size:20px;line-height:1.35;letter-spacing:-.03em;margin-top:7px}.filters{display:flex;gap:6px;padding:12px 14px 8px}.filters button{font-size:12px;border:1px solid #d4dfd5;background:white;color:#587060;border-radius:7px;min-height:32px;flex:1}.filters button[aria-pressed=true]{background:#145f4e;color:white;border-color:#145f4e}.loaded{display:flex;justify-content:space-between;font-size:10px;color:#647c6b;padding:4px 14px 9px}.loaded b{color:#164c38}.phone-list{height:188px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b5ccba transparent;border-block:1px solid #e1e8dd}.phone-list ul{list-style:none;padding:0;margin:0}.post{padding:11px 14px;border-bottom:1px solid #e6ece5}.post:last-child{border:0}.post-top{display:flex;justify-content:space-between;font-size:10px;color:#77917f}.post-top span:first-child{color:#28795f;font-weight:650}.post h3{font-size:12px;font-weight:650;line-height:1.6;margin-top:4px}.post small{font-size:10px;color:#758d7e}.phone-list #empty{font-size:12px;padding:24px 14px;color:#6e8174;line-height:1.8}.phone-footer{padding:10px 12px 12px}.phone-footer button{width:100%;padding:10px 7px;border:0;border-radius:8px;background:#176c55;color:#fff;font-size:12px;font-weight:700;min-height:38px}.phone-footer span{display:block;font-size:10px;color:#6a8373;line-height:1.6;text-align:center;margin-top:5px}.connection{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:8px;color:#658775;font-size:10px;padding-top:20px}.connection b{font-size:25px;line-height:1;color:#45957b}.connection small{font-size:10px;letter-spacing:.08em}.server-region{background:#e4edf6;border:1px solid #afc6dc;border-radius:17px;padding:16px}.server-region .region-label{color:#456781}.server-region article{padding:15px 17px;border:1px solid #cad6d6;border-radius:10px;margin-bottom:10px}.server-region article header{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#6b7d77;align-items:center}.step-label{font-weight:750}.amber{color:#9d6d16}.blue{color:#316990}.green{color:#267659}.request-card{background:#fff5df!important;border-color:#dfc994!important}.query-card{background:#f5f9ff!important;border-color:#bdd0e3!important}.response-card{background:#effaf3!important;border-color:#a6cdb4!important}.server-region h3{font-size:17px;line-height:1.5;margin-top:9px;letter-spacing:-.02em}.server-region article p{font-size:12px;color:#5c746b;line-height:1.8;margin-top:6px}.response-stats{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:11px}.response-stats>div{padding-right:8px}.response-stats b{display:block;font-size:26px;line-height:1.25;letter-spacing:-.03em}.response-stats span{display:block;font-size:10px;color:#6b8475;margin-top:5px}.wire-open{padding:9px 12px;min-height:36px;font-size:12px;background:#fff;border:1px solid #b2c9dc;color:#386580;border-radius:8px;width:100%}.status{font-size:13px;line-height:1.8;margin-top:14px;border-left:3px solid #409c80;background:#e1efe3;padding:10px 14px;min-height:43px}.status.error{border-color:#be734f;background:#fff0e3;color:#79523d}.status.waiting{border-color:#a58c3c;background:#f9f0d9;color:#7a682e}.test-tools{margin-top:14px;border:1px solid #c9d7c8;border-radius:9px;padding:10px 14px;background:#f8faf5}.test-tools summary{font-size:12px;cursor:pointer;min-height:22px;padding-block:2px}.test-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}.test-controls label{display:flex;gap:7px;align-items:center;font-size:12px;min-height:30px}.test-controls input{accent-color:#227b60}.secondary{padding:8px 12px;border-radius:7px;border:1px solid #b9cdbb;background:white;color:#315a42;font-size:12px;min-height:35px}.test-tools>p{font-size:11px;line-height:1.8;color:#68816c;margin-top:12px}.mobile-views{display:none}dialog{width:min(940px,calc(100% - 32px));max-height:85vh;background:#f7faf5;border:1px solid #99baa6;border-radius:15px;padding:24px;color:#274b37}dialog::backdrop{background:#0a251dcc}dialog>header{display:flex;justify-content:space-between;gap:15px;align-items:center}dialog h2{font-size:22px;line-height:1.5;margin-top:6px}dialog>p{font-size:12px;line-height:1.9;margin-block:14px}.wire-entry{border:1px solid #c4d6c5;border-radius:9px;padding:15px;margin-top:12px;background:#fff}.wire-entry h3{font-size:14px;line-height:1.6}.wire-entry p{font-size:12px;line-height:1.8;margin:7px 0;color:#55775c}.wire-entry pre{font:11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;background:#edf3eb;border-radius:6px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:330px;overflow:auto}.wire-badge{font-size:11px;font-weight:650;color:#927427}
@media(min-width:1100px){.workbench{grid-template-columns:316px 82px minmax(0,1fr)}.phone-list{height:201px}.server-region{min-height:489px}.server-region article{padding:17px 20px}.server-region h3{font-size:18px}.demo-heading h1{font-size:26px}}
@media(max-width:760px){.demo{padding:17px 14px}.demo-heading{align-items:flex-start}.demo-heading h1{font-size:21px;max-width:260px}.eyebrow{font-size:10px}.quiet{font-size:11px;padding:8px 10px}.route{gap:5px;margin:16px 0 12px}.route li{display:block;padding:8px 5px;text-align:center;font-size:10px;line-height:1.6;border-radius:7px}.route li b{display:block;font-size:10px}.mobile-views{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}.mobile-views button{min-height:37px;border-radius:8px;border:1px solid #b8cbbb;background:white;color:#69816e;font-size:12px;font-weight:650}.mobile-views button[aria-pressed=true]{background:#1b6653;border-color:#1b6653;color:#fff}.workbench{display:block}.connection{display:none}.demo[data-view=app] .server-region{display:none}.demo[data-view=server] .app-region{display:none}.app-region,.server-region{padding:14px}.phone{max-width:290px;margin:0 auto}.phone-list{height:183px}.phone-header h2{font-size:19px}.app-region>.region-label{font-size:11px}.server-region{min-height:467px}.server-region article{padding:16px}.server-region h3{font-size:18px}.server-region article p{font-size:12px}.status{font-size:12px;min-height:64px}.test-controls{gap:8px 14px}.test-controls label{width:100%}.test-controls .secondary{flex:1;padding:9px 6px}.test-tools>p{font-size:11px}dialog{padding:17px;width:calc(100% - 24px)}dialog h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}