@font-face{font-family:Pretendard;src:url(/demos/notification-connection/font.woff2) format('woff2');font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f4f6f2;color:#193b35;font-family:Pretendard,sans-serif;font-size:14px;line-height:1.6}button,a{font:inherit}button{cursor:pointer;border:1px solid #cfdbd6;background:white;color:#32564a;border-radius:9px;padding:9px 13px}button:hover{background:#f0f6ee}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #309d83;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}a{color:inherit}.demo{max-width:1250px;margin:auto;padding:20px 26px 16px}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:11px;color:#6d857b;letter-spacing:.06em;margin:0 0 3px}.demo-heading h1{font-size:23px;line-height:1.45;margin:0}.demo-heading a{font-size:12px;color:#71877d}.intro-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:17px 0 10px}.intro-bar p{font-size:14px;line-height:1.7;margin:0;color:#678176}.intro-bar b{font-weight:650;color:#244f42}.reset{padding:5px 11px;font-size:11px;background:transparent;white-space:nowrap}.context{display:flex;align-items:center;gap:9px;font-size:11px;color:#7b9084;margin:0 0 22px}.context b{font-size:11px;font-weight:600;color:#557c6a}.context-status{border-left:1px solid #ccd9ce;padding-left:9px}.context-dot{height:5px;width:5px;background:#5c9b7b;border-radius:50%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.04fr) 48px minmax(0,1fr);gap:13px;align-items:start}.stage-heading{height:63px;display:flex;gap:11px;align-items:start}.stage-number{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#dcebf5;color:#39729a;flex-shrink:0;font-size:14px;font-weight:650}.stage-heading h2{font-size:16px;line-height:1.5;margin:0;color:#295b7c}.stage-heading p{font-size:11px;line-height:1.5;color:#7a929a;margin:3px 0 0}.server .stage-number{color:#39765c;background:#dcece2}.server .stage-heading h2{color:#2e6850}.server .stage-heading p{color:#779181}.detail .stage-number{background:#e5e6f8;color:#6b65a2}.detail .stage-heading h2{color:#625c93}.detail .stage-heading p{color:#8d88aa}.phone{height:382px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #bfcfda;border-radius:20px;box-shadow:0 4px 12px #35514508}.inbox .phone{border-color:#bacfdc}.detail .phone{border-color:#cbc9e2}.phone-header{position:relative;background:#23536d;color:#fff;padding:17px 19px 15px}.brand{display:block;font-size:10px;letter-spacing:.04em;color:#b8d4df}.phone-header h3{font-size:23px;line-height:1.4;margin:2px 0 0;font-weight:650}.member-label{position:absolute;right:18px;bottom:19px;font-size:10px;color:#c4d9e1}.phone-content{padding:15px 18px;flex:1;min-height:0;overflow:auto}.small-heading{font-size:11px;color:#91a1a9;margin:0 0 12px}.notification{width:100%;display:block;text-align:left;background:#f4f9fd;border:1px solid #b7d0e0;border-radius:12px;padding:14px 14px 0;box-shadow:0 3px 8px #1d567307}.notification:hover{background:#edf6fd;border-color:#5e9ac0}.note-category{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#6d94ad}.note-category>span{font-size:9px;color:#a0b3be}.notification strong{font-size:20px;line-height:1.45;display:block;margin:9px 0 11px;color:#214d67;font-weight:650}.note-description{display:block;font-size:10px;color:#8a9da9}.order-chip{display:inline-block;background:#e1eef7;border:1px solid #c6ddea;border-radius:5px;padding:1px 7px;color:#4d80a0;font-size:12px;font-weight:650;margin:4px 0 12px}.note-action{display:flex;align-items:center;justify-content:space-between;background:#2b719b;color:#fff;font-size:12px;font-weight:650;margin:0 -14px;padding:10px 14px;border-radius:0 0 10px 10px}.note-action i{font-style:normal;font-size:18px;line-height:1}.phone-hint{font-size:10px;line-height:1.6;color:#9caab1;margin:13px 0 0}.phone-nav{height:32px;flex-shrink:0;border-top:1px solid #e9eef0;background:#fff;display:flex;justify-content:space-around;align-items:center;color:#a2adb1;font-size:9px}.phone-nav b{color:#50798e}.empty{font-size:12px;color:#90a4ae;margin:25px 0}.wire{align-self:center;height:84px;display:grid;grid-template-rows:24px 2px 24px;gap:10px;align-content:center;min-width:0;text-align:center;font-size:9px;color:#7096ad}.wire>span{align-self:end;line-height:1.4}.wire small{font-size:10px;line-height:1.4;color:#8aa3b0}.track{position:relative;height:2px;background:#bdd2df}.track:after{content:'';position:absolute;right:0;top:-3px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #88afc7}.track i{display:none;position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#267bab;box-shadow:0 0 0 4px #267bab17}.response{color:#8e89aa}.response .track{background:#d0cce5}.response .track:after{border-left-color:#a09abe}.response .track i{background:#8a7eb1;box-shadow:0 0 0 4px #8a7eb117}.busy .track i{display:block;animation:transmit .65s linear infinite}.response .track i{animation-delay:.2s}.server-card{height:382px;background:#eaf2ed;border:1px solid #c1d8c9;border-radius:18px;padding:19px 19px 16px;display:flex;flex-direction:column}.server-state{font-size:10px;color:#7c9c88;display:flex;align-items:center;gap:6px;margin:0}.server-state i{width:6px;height:6px;background:#92b29c;border-radius:50%}.busy .server-state i{background:#248569;animation:pulse .5s infinite}.server-card h3{font-size:20px;line-height:1.45;color:#315e48;margin:12px 0 19px;font-weight:650;min-height:58px}.checks{list-style:none;display:grid;gap:16px;margin:0;padding:0}.checks li{display:flex;align-items:start;gap:10px}.check-mark{height:24px;width:24px;flex-shrink:0;background:#dde8e0;border:1px solid #d0dfd5;border-radius:50%;display:grid;place-items:center;color:#a0b5a7;font-size:17px;line-height:1}.checks strong{display:block;font-size:13px;font-weight:600;color:#5a7c68}.checks li div>span{display:block;font-size:11px;color:#93a79a;line-height:1.5;margin:2px 0 0}.checks li.done .check-mark{background:#43876b;border-color:#43876b;color:white;font-size:12px}.checks li.done strong{color:#2c624b}.checks li.done div>span{color:#62836d}.checks li.stopped .check-mark{background:#f8e8e4;border-color:#e4c5bc;color:#af7363;font-size:12px}.checks li.stopped strong{color:#a66c5a}.server-result{border-top:1px solid #cfdfd2;margin-top:auto;padding-top:11px}.server-result>span{display:block;font-size:10px;color:#91a798}.server-result>b{display:block;font-size:12px;font-weight:600;color:#52775e;margin-top:1px}.detail-header{height:61px;flex-shrink:0;display:flex;align-items:center;gap:9px;border-bottom:1px solid #eeeef5;padding:12px 16px}.detail-header button{font-size:18px;line-height:1;background:transparent;border:0;padding:2px;color:#8d87a2}.detail-header h3{font-size:15px;margin:0;color:#514c6a;font-weight:600}.detail-header>span{font-size:10px;margin-left:auto;color:#b1adc0}.result-content{padding:17px 19px}.result-empty{text-align:center;padding:51px 0 0;color:#a09bb4}.empty-order{display:inline-block;padding:6px 12px;border:1px dashed #d4d0e5;border-radius:7px;font-size:14px;color:#a29db5;background:#f8f7fb}.result-empty h4{font-size:14px;font-weight:500;margin:17px 0 8px;color:#918ba4}.result-empty p{font-size:11px;line-height:1.8;margin:0;color:#b0aabe}.result-content .order-chip{background:#f0eef8;border-color:#dad4eb;color:#8577a8;margin:0 0 9px}.result-content h4{font-size:20px;line-height:1.4;margin:0 0 15px;font-weight:650;color:#49425b}.order-status{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid #d6cee9;background:#f4f0fa;border-radius:10px}.order-status span{font-size:10px;color:#a191b4}.order-status strong{font-size:18px;color:#796193;font-weight:650}dl{font-size:11px;margin:14px 0 12px}dl>div{display:flex;justify-content:space-between;margin:7px 0}dt{color:#afa5ba}dd{margin:0;color:#7a6d8b}.success-note{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.5;margin:0 0 12px;color:#8a79a1}.success-note>span{font-size:10px;font-weight:650;color:#786392}.reload{font-size:11px;border-color:#dfd9e9;background:#fcfbfe;color:#9b8ba9;width:100%;padding:7px}.primary{font-size:11px;background:#3a7c67;border-color:#3a7c67;color:white;width:100%;padding:10px 7px}.primary:hover{background:#2c6855}.error-state{padding-top:28px}.state-pill{display:inline-block;font-size:10px;border:1px solid #e5d7b5;background:#fff5de;color:#a88c4c;padding:3px 7px;border-radius:5px}.state-pill.denied{background:#fbefec;border-color:#e7cfc7;color:#af8173}.error-state h4{font-size:19px;margin:15px 0 10px}.error-state p{font-size:12px;color:#a698ac;line-height:1.8;margin:0 0 25px}.summary{border:1px solid #d2e0db;background:#eaf2ee;border-radius:10px;padding:11px 15px;margin:16px 0 0;display:flex;gap:10px;align-items:center;color:#617e6f}.summary-mark{font-size:20px;line-height:1;color:#6c9a80}.summary p{font-size:12px;line-height:1.6;margin:0}.more-cases{margin-top:14px;border-top:1px solid #dbe3da;padding:11px 0 0}.more-cases>summary{cursor:pointer;font-size:11px;color:#819287;list-style:none;display:flex;justify-content:space-between;align-items:center}.more-cases>summary:before{content:'+';font-size:16px;line-height:1;margin-right:8px;color:#91a396}.more-cases[open]>summary:before{content:'−'}.more-cases>summary>span{font-size:9px;background:#e6ece2;padding:2px 7px;border-radius:5px;margin-left:auto;color:#90a189}.more-cases>p{font-size:11px;color:#92a08f;margin:10px 0}.scenario-bar{display:flex;gap:7px;flex-wrap:wrap}.scenario-bar button{font-size:11px;padding:8px 11px;color:#78907d}.evidence{padding:9px 0 0}.evidence>summary{font-size:10px;color:#9ba89c;cursor:pointer;list-style:none}.evidence>summary:before{content:'＋ ';color:#a1b09e}.evidence[open]>summary:before{content:'− '}.evidence p{font-size:11px;color:#8c9b8b}.evidence pre{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #dce5d8;padding:15px;background:#fafcf7;border-radius:10px;color:#71876b}.evidence ol{font-size:10px;color:#90a088;padding-left:20px}.scope{font-size:9px;color:#a0ad9c;line-height:1.6;margin:10px 0 0}.mobile-tabs{display:none}[hidden]{display:none!important}@keyframes transmit{to{left:100%}}@keyframes pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.demo{padding:16px 15px 13px}.demo-heading h1{font-size:19px}.demo-heading a{display:none}.intro-bar{margin:10px 0 9px;gap:10px;align-items:start}.intro-bar p{font-size:12px;line-height:1.7}.intro-bar b{display:block}.reset{font-size:10px;padding:5px 8px;flex-shrink:0}.context{font-size:10px;gap:7px;flex-wrap:wrap;margin-bottom:12px}.context b{font-size:10px}.context-status{padding-left:7px}.mobile-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;padding:4px;background:#e5ebe6;gap:3px;border-radius:10px;margin:0 0 16px}.mobile-tabs button{font-size:10px;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 3px;border:0;background:transparent;color:#94a198;border-radius:7px}.mobile-tabs button b{font-size:9px;background:#d6e1d8;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-weight:600}.mobile-tabs button[aria-selected=true]{background:#fff;color:#5b7d68;box-shadow:0 1px 5px #294b3610}.mobile-tabs button[aria-selected=true] b{color:white;background:#6b967c}.workspace{display:block;max-width:370px;margin:auto}.wire{display:none}.workspace[data-mobile=inbox] .stage:not(.inbox),.workspace[data-mobile=server] .stage:not(.server),.workspace[data-mobile=detail] .stage:not(.detail){display:none}.stage-heading{height:54px;gap:9px}.stage-heading h2{font-size:15px}.stage-heading p{font-size:10px;margin-top:1px}.stage-number{width:27px;height:27px;font-size:13px;border-radius:8px}.phone,.server-card{height:376px}.phone-content{padding:14px 19px}.phone-header{padding:15px 19px 14px}.phone-header h3{font-size:22px}.notification strong{font-size:21px}.note-description{font-size:11px}.note-action{font-size:13px}.phone-hint{font-size:10px;margin-top:12px}.server-card{padding:19px 21px 15px}.server-card h3{font-size:21px}.checks strong{font-size:14px}.checks li div>span{font-size:12px}.summary{padding:10px 11px;margin-top:12px;align-items:start;gap:7px}.summary p{font-size:11px}.summary-mark{font-size:17px}.more-cases>summary{font-size:10px;line-height:1.6}.more-cases>summary>span{display:none}.scenario-bar{display:grid;grid-template-columns:1fr 1fr;gap:6px}.scenario-bar button{font-size:10px;padding:9px 5px}.scope{font-size:9px}.result-content{padding:15px 19px}.result-content h4{font-size:20px}.error-state h4{font-size:19px}}

.phone-hint{display:none}#order-result h4{font-size:18px;line-height:1.5;margin-bottom:12px}.order-status{padding:10px 12px}.checks strong{font-size:14px}.checks li div>span{font-size:12px;color:#6b8c77}.server-state{font-size:11px;color:#6a8b77}.small-heading{color:#7d939f}.more-cases>summary{color:#668173}.evidence>summary{color:#839580}.scope{font-size:10px;color:#81947d}.result-empty p{color:#91869f}.result-empty h4{font-size:15px;color:#80708f}

.more-cases>summary{justify-content:flex-start;gap:8px}.more-cases>summary:before{margin-right:0}