@font-face{font-family:DemoPretendard;src:url('/demos/photo-attachment/font.woff2') format('woff2');font-display:swap}:root{font-family:'Apple SD Gothic Neo',DemoPretendard,'Noto Sans KR',sans-serif;color:#203e36;background:#f1f4ee;--green:#17634f;--muted:#62776e;--line:#d6e0d7}*{box-sizing:border-box}body{margin:0}h1,h2,h3,p{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid transparent}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible{outline:3px solid #26a18a;outline-offset:3px}[hidden]{display:none!important}.demo{max-width:1240px;margin:auto;padding:20px}.demo-top{display:flex;justify-content:space-between;gap:18px;align-items:center}.eyebrow{color:#4f7b67;font-size:11px;line-height:1.7}.demo-top h1{font-size:22px;line-height:1.45;letter-spacing:-.025em;margin-top:4px;word-break:keep-all}.quiet{padding:9px 12px;background:none;border-color:#c5d5c7;color:#5d7c69;border-radius:8px;font-size:11px;white-space:nowrap}.scenario{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.scenario button{border-radius:7px;padding:8px 13px;font-size:12px;border-color:#cad7cd;background:#fff;color:#597363}.scenario button[aria-pressed=true]{background:#225b49;color:#fff;border-color:#225b49}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0;margin:16px 0 18px}.steps li{display:flex;gap:8px;align-items:center;background:#e7ede4;color:#728273;border:1px solid #d5dfd2;border-radius:7px;padding:9px 12px;font-size:11px}.steps b{font-size:10px}.steps [aria-current=step]{background:#e1f1e6;border-color:#88bca0;color:#28654d}.workspace{display:grid;grid-template-columns:minmax(0,.85fr) 80px minmax(0,1fr);gap:18px;align-items:start}.app,.server{min-width:0}.region{display:flex;align-items:center;gap:7px;min-height:32px;margin-bottom:10px}.region h2{font-size:14px}.region>span:last-child{margin-left:auto;color:#789083;font-size:10px}.dot{width:6px;height:6px;border-radius:50%;flex:none}.green{background:#e1f1e6;color:#28654d}.blue{background:#e3edf6;color:#3e6a8b}.dot.green{background:#2d8666}.dot.blue{background:#5e87af}.phone{max-width:330px;margin:auto;border:1px solid #c5d6cb;border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 4px 12px #1b4a2d06}.app-header{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#f4f7f2;border-bottom:1px solid #e0e8e0;font-size:12px}.app-header>span{font-weight:600;color:#265e48}.app-header>b{font-size:10px;font-weight:500;color:#718877}.app-body{padding:16px 18px}.app-body label{font-size:10px;color:#6b8475;display:block}.app-body input{display:block;width:100%;min-width:0;padding:7px 0 10px;margin-bottom:12px;font-size:17px;font-weight:600;border:0;border-bottom:1px solid #e2e9e0;border-radius:0;color:#264c3b;background:#fff;outline-offset:0}.photo-slot{position:relative;width:100%;height:151px;border:1px solid #dce5d9;border-radius:8px;overflow:hidden;background:#eef2e9}.photo-slot img{display:block;width:100%;height:100%;object-fit:cover}.photo-slot #photo-empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#6b8572;font-size:12px}.photo-slot #photo-empty p{font-size:10px;margin-top:9px;color:#90a18f}#photo-state{position:absolute;bottom:8px;left:8px;background:#fffef4eb;color:#365b45;font-size:9px;padding:5px 7px;border-radius:4px}.file-line{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:10px;font-size:10px;color:#798e7c}.file-line b{color:#4c8263;font-size:10px}#app-message{font-size:11px;line-height:1.75;min-height:39px;color:#738876;margin-top:10px;word-break:keep-all}.select-photo{font-size:11px;border-color:#c6d7c6;background:#fff;color:#49765a;width:100%;padding:9px;border-radius:6px;margin-top:10px}.primary{background:var(--green);color:white;font-weight:600;width:100%;border:0;border-radius:6px;min-height:39px;margin-top:9px;font-size:12px}.app-footer{display:flex;justify-content:space-between;padding:10px 18px;border-top:1px solid #e1e9df;font-size:9px;color:#78907b;background:#f9fbf7}.arrows{align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:#6c8a76;padding-top:40px}.arrows span{font-size:10px}.arrows b{font-size:30px;font-weight:400;line-height:1;color:#4b8a8f}.arrows b:nth-of-type(2){color:#5d9a73}.arrows small{font-size:8px;white-space:nowrap}.server{display:grid;gap:11px}.server .region{margin-bottom:-1px}.server-card{background:#eaf1f8;border:1px solid #c1d4e4;border-radius:12px;padding:16px 18px}.card-top{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:9px;color:#80917f}.label{display:inline-block;padding:4px 7px;font-size:9px;border-radius:4px;font-weight:600}.sand{background:#f0e6d0;color:#826a3d}.card-top>b{font-size:10px;color:#53799b}.server-card h3{font-size:17px;line-height:1.5;margin-top:12px;color:#345c7b;word-break:keep-all}.server-card p{font-size:11px;line-height:1.85;margin-top:8px;color:#65819a;word-break:keep-all}.request-path{font:10px/1.7 ui-monospace,SFMono-Regular,monospace;border-top:1px solid #cfdeea;padding-top:10px;margin-top:12px;color:#587f9e;overflow-wrap:anywhere}.storage-card{padding:15px 18px;background:#faf7ee;border:1px solid #dfd4b9;border-radius:12px}.storage-counts{display:grid;grid-template-columns:repeat(3,1fr);margin:13px 0}.storage-counts>div{border-right:1px solid #e1dbc9;text-align:center}.storage-counts>div:last-child{border:0}.storage-counts b{display:block;font-size:25px;font-weight:600;color:#685e3e;line-height:1.2}.storage-counts span{display:block;font-size:9px;color:#9c9074;margin-top:5px}.record{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e7dfcb;padding-top:8px;margin-top:8px;font-size:10px;line-height:1.6;color:#978a6a}.record strong{font-size:10px;font-weight:500;color:#706549;text-align:right}.result-card{padding:12px 15px;border-radius:10px;background:#e7f2e9;border:1px solid #c5ddc9}.result-card p{font-size:11px;line-height:1.75;color:#5d8269;margin-top:7px;word-break:keep-all}.secondary{padding:8px 12px;font-size:10px;background:#fff;border:1px solid #bcd2bf;color:#477a55;border-radius:6px;margin-top:8px}.notice{border-left:3px solid #74a88b;background:#e4eee2;margin-top:17px;padding:9px 12px;font-size:12px;line-height:1.8;color:#4c7358;word-break:keep-all}.notice.error{background:#fbefdc;border-color:#c6a067;color:#9b743c}.tools{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px}.tools button{border:0;background:none;font-size:10px;color:#52755f;text-decoration:underline;text-underline-offset:3px;padding:0}.tools span{font-size:9px;color:#8b9d87}dialog{width:min(850px,calc(100% - 24px));max-height:calc(100vh - 32px);border:1px solid #c6d6c9;border-radius:13px;background:#f6f8f2;padding:0;color:#274a38}dialog::backdrop{background:#12342a77}dialog>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #d7e2d2}dialog h2{font-size:19px;margin-top:4px}#wire-body{padding:18px;max-height:calc(100vh - 140px);overflow:auto}#wire-body article{border:1px solid #cedbd2;background:#fff;padding:13px;border-radius:8px;margin-bottom:12px}#wire-body h3{font-size:12px;overflow-wrap:anywhere}#wire-body pre{font:10px/1.8 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0 0;color:#54705b}button,input{touch-action:manipulation}
@media(min-width:1000px){.phone{max-width:340px}.photo-slot{height:158px}.app-body{padding:17px 20px}.server-card{padding:19px}.storage-card{padding:17px 19px}.result-card{padding:14px 17px}}
@media(max-width:760px){.demo{padding:13px}.demo-top h1{font-size:18px}.demo-top .eyebrow{font-size:10px}.scenario{gap:5px;margin-top:13px}.scenario button{font-size:10px;padding:7px 9px}.steps{gap:5px;margin:13px 0}.steps li{font-size:10px;padding:8px 6px;gap:5px;justify-content:center}.steps b{font-size:9px}.workspace{grid-template-columns:1fr;gap:9px}.region{margin-bottom:8px;min-height:24px}.region h2{font-size:13px}.phone{max-width:355px;width:100%;border-radius:14px}.app-header{padding:11px 15px}.app-body{padding:12px 15px}.app-body input{font-size:17px;margin-bottom:10px}.photo-slot{height:130px}.file-line{margin-top:8px}#app-message{min-height:0;margin-top:8px;font-size:11px}.select-photo{margin-top:8px;padding:8px}.primary{margin-top:7px;min-height:36px}.app-footer{padding:9px 15px}.arrows{display:flex;flex-direction:row;justify-content:center;gap:9px;padding:0;margin:1px 0}.arrows b{font-size:21px;transform:rotate(90deg)}.arrows b:nth-of-type(2){display:none}.arrows span:last-child{display:none}.arrows small{font-size:9px}.server{grid-template-columns:1fr 1fr;gap:9px}.server .region{grid-column:1/-1}.server-card,.storage-card{padding:11px;border-radius:9px}.server-card h3{font-size:13px;margin-top:9px;line-height:1.6}.server-card p{font-size:10px;line-height:1.75;margin-top:7px}.request-path{font-size:9px;margin-top:9px;padding-top:8px}.card-top{gap:5px;flex-wrap:wrap}.label{font-size:9px;padding:4px 5px}.card-top>b{font-size:9px}.storage-card .card-top>span:last-child{display:none}.storage-counts{margin:12px 0}.storage-counts b{font-size:22px}.storage-counts span{font-size:8px;line-height:1.5}.record{display:block;font-size:9px;margin-top:7px;padding-top:7px}.record strong{display:block;text-align:left;font-size:10px;margin-top:3px;overflow-wrap:anywhere}.result-card{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:10px 12px}.result-card>.label{width:max-content}.result-card>p{grid-column:1;grid-row:2;font-size:10px;margin:0}.result-card>button{grid-column:2;grid-row:1/3;align-self:center;margin:0;max-width:105px;font-size:10px;padding:8px}.notice{font-size:11px;margin-top:12px}.tools{gap:8px;align-items:start}.tools span{font-size:8px;max-width:180px;line-height:1.6;text-align:right}.tools button{font-size:10px}.quiet{padding:7px 8px;font-size:10px}.demo-top{gap:12px}dialog>header{padding:13px}#wire-body{padding:12px}.embedded .demo-top{display:none}.embedded .scenario{margin-top:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.embedded .demo-top{display:none}.embedded .scenario{margin-top:0}@media(min-width:761px){.embedded .demo{padding:16px}.embedded .server-card{padding:13px 16px}.embedded .storage-card{padding:13px 16px}.embedded .result-card{padding:10px 14px}.embedded .photo-slot{height:140px}}

@media(min-width:761px){.embedded .phone .app-body{padding:12px 16px}.embedded .photo-slot{height:115px}.embedded .app-header{padding:12px 16px}.embedded .server-card h3{margin-top:8px;font-size:16px}.embedded .server-card p{line-height:1.7;margin-top:6px}.embedded .request-path{margin-top:9px;padding-top:8px}.embedded .storage-counts{margin:10px 0}.embedded .notice{margin-top:12px;font-size:11px}}
/* R3 communication behavior, R4 vertical alignment: two stable, direction-aware paths; movement exists only during a real request. */
.workspace{grid-template-columns:minmax(0,.85fr) 150px minmax(0,1fr);gap:16px}
.connection{min-width:0;align-self:center;display:flex;flex-direction:column;gap:25px;padding:0;margin:42px 0 0;--request:#4f7fa2;--response:#47896b}
.connection-heading{display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;line-height:1.6;color:#668071;min-height:34px;text-align:center;word-break:keep-all}
.connection-indicator{width:6px;height:6px;border-radius:50%;background:#a8bab0;flex:none}
.connection-lane{position:relative;display:flex;flex-direction:column;gap:10px;color:var(--request);text-align:center;min-width:0;opacity:.78}
.connection-lane.inbound{color:var(--response)}.lane-label{font-size:11px;font-weight:600;line-height:1.5}.lane-caption{font-size:9px;line-height:1.5;color:#7d9285}
.lane-track{display:block;position:relative;height:2px;background:currentColor;margin-inline:3px;isolation:isolate}
.lane-track::before{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;left:0;top:50%;transform:translate(-50%,-50%)}
.lane-track::after{content:'';position:absolute;width:9px;height:9px;background:currentColor;right:-1px;top:50%;transform:translateY(-50%);clip-path:polygon(0 0,100% 50%,0 100%)}
.inbound .lane-track::before{left:auto;right:0;transform:translate(50%,-50%)}.inbound .lane-track::after{right:auto;left:-1px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.packet{position:absolute;width:8px;height:8px;left:0;top:50%;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px #4f7fa21a;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.inbound .packet{box-shadow:0 0 0 4px #47896b1a}
.connection-state{display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1.65;min-height:34px;margin:0;padding:6px 7px;border:1px solid #d2dfd3;border-radius:7px;background:#edf3e9;text-align:center;color:#708575;word-break:keep-all}
.connection[data-phase="request"] .outbound,.connection[data-phase="response"] .inbound{opacity:1}
.connection[data-phase="request"] .outbound .packet{animation:packet-across .8s linear infinite}
.connection[data-phase="response"] .inbound .packet{animation:packet-across .8s linear infinite reverse}
.connection[data-phase="request"] .connection-indicator{background:var(--request);animation:connection-pulse .9s ease-in-out infinite}
.connection[data-phase="response"] .connection-indicator{background:var(--response);animation:connection-pulse .9s ease-in-out infinite}
.connection[data-phase="request"] .connection-state{background:#e7eff6;border-color:#b9d0e1;color:#527794}
.connection[data-phase="response"] .connection-state,.connection[data-phase="success"] .connection-state{background:#e7f1e8;border-color:#bad4c0;color:#4b7b57}
.connection[data-phase="success"] .connection-indicator{background:#59916b}
.connection[data-phase="rejected"] .connection-state,.connection[data-phase="error"] .connection-state{background:#fbefdc;border-color:#dcc396;color:#99703b}
.connection[data-phase="rejected"] .connection-indicator,.connection[data-phase="error"] .connection-indicator{background:#b98b45}
.server[data-communicating="true"] .server-card{border-color:#7ca8c5;box-shadow:0 0 0 2px #9bc4d42b}
.server[data-communicating="true"] .region::after{content:'';width:10px;height:10px;border:1.5px solid #c3d5dd;border-top-color:#537d96;border-radius:50%;animation:communication-spin .8s linear infinite;flex:none}
.primary.is-waiting::before{content:'';display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:7px;border:1.5px solid #ffffff60;border-top-color:#fff;border-radius:50%;animation:communication-spin .8s linear infinite}
.motion-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:10px;line-height:1.7;color:#6a826c}.motion-options label{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.motion-options input{margin:0;accent-color:#236b54;width:13px;height:13px}.motion-options>span{color:#8a9d87;font-size:9px;text-align:right}
@keyframes packet-across{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes packet-down{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes connection-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes communication-spin{to{transform:rotate(360deg)}}
@media(max-width:1000px) and (min-width:761px){.workspace{grid-template-columns:minmax(0,.85fr) 126px minmax(0,1fr);gap:12px}.connection{gap:22px}.lane-label{font-size:10px}.lane-caption{font-size:8px}.connection-heading{font-size:10px}}
@media(max-width:760px){
 .workspace{grid-template-columns:1fr;gap:10px}.connection{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:10px 14px;margin:1px 0;border:1px solid #d6e2d5;border-radius:9px;background:#eef3e9;align-self:auto}
 .connection-heading{grid-column:1/-1;min-height:0;font-size:10px;justify-content:flex-start}.connection-lane{display:grid;grid-template-columns:12px 1fr;grid-template-rows:auto auto;gap:3px 10px;align-items:center;text-align:left;opacity:1}
 .lane-track{grid-column:1;grid-row:1/3;width:2px;height:34px;margin:0 4px;background:currentColor;justify-self:center}
 .lane-label{grid-column:2;grid-row:1;font-size:11px}.lane-caption{grid-column:2;grid-row:2;font-size:9px}
 .lane-track::before{left:50%;top:0;transform:translate(-50%,-50%)}.lane-track::after{left:50%;top:auto;bottom:-1px;right:auto;width:8px;height:8px;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%)}
 .inbound .lane-track::before{left:50%;right:auto;top:auto;bottom:0;transform:translate(-50%,50%)}.inbound .lane-track::after{left:50%;right:auto;top:-1px;bottom:auto;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,0 100%)}
 .packet{left:50%;top:0;transform:translate(-50%,-50%);width:7px;height:7px}
 .connection[data-phase="request"] .outbound .packet{animation-name:packet-down}.connection[data-phase="response"] .inbound .packet{animation-name:packet-down}
 .connection-state{grid-column:1/-1;text-align:left;font-size:10px;min-height:0;padding:5px 8px}.motion-options{display:block;margin-top:10px;font-size:10px}.motion-options>span{display:block;text-align:left;margin:4px 0 0 19px;font-size:9px}.tools{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
 .connection .packet,.connection .connection-indicator,.server[data-communicating="true"] .region::after,.primary.is-waiting::before{animation:none!important}
 .connection[data-phase="request"] .outbound .packet,.connection[data-phase="response"] .inbound .packet{opacity:1;left:50%;top:50%}
}
@media(min-width:761px){.app .phone{margin-left:auto;margin-right:0}.app .region{max-width:340px;margin-left:auto}}
@media(min-width:761px) and (max-width:999px){.app .region{max-width:330px}}
@media(max-width:760px){.connection-heading{grid-column:1;grid-row:1}.connection-lane.outbound{grid-column:1;grid-row:2}.connection-lane.inbound{grid-column:2;grid-row:2}.connection-state{grid-column:2;grid-row:1;border:0;background:none!important;text-align:right;padding:0;align-self:center;font-size:9px;white-space:nowrap}}

/* Match the 42px app/server heading offset; center the entire connection stack below it. */
@media(min-width:761px){.connection-heading{height:34px;min-height:34px;flex:none}.connection-lane{height:52px;flex:none}.connection-state{height:34px;min-height:34px;flex:none}}
@media(max-width:760px){.connection-heading,.connection-state{height:18px;min-height:18px;line-height:18px;align-self:center}.connection-state{justify-content:flex-end}}

/* R5: all three regions share the same content top and bottom edges. */
@media(min-width:761px){
 .workspace{align-items:stretch}
 .app{display:flex;flex-direction:column}
 .app>.region{width:100%;flex:none}
 .app>.phone{width:100%;flex:1;display:flex;flex-direction:column}
 .app .app-body{flex:1;display:flex;flex-direction:column}
 .app .select-photo{margin-top:auto}
 .app #app-message{margin-bottom:10px}
 .connection{align-self:stretch;display:grid;grid-template-rows:34px minmax(52px,1fr) minmax(52px,1fr) 34px;align-items:center;gap:12px;margin:42px 0 0;padding:14px 10px;border:1px solid #d6e2d5;border-radius:12px;background:#edf3e9}
 .connection-heading{height:34px;min-height:34px;font-size:10px}
 .connection-lane{height:52px}
 .connection-state{height:34px;min-height:34px;padding:5px 3px;font-size:9px}
}