/* Playce Studio · 앱 빌더와 사내 제작 앱 */
.st-pill{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#6a5f9c;background:#f1effa;padding:7px 11px;border-radius:10px}
.st-pill .ico{width:13px}
.st-steps{display:flex;gap:6px;margin:0 0 14px;padding:0;list-style:none;flex-wrap:wrap}
.st-steps li{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:20px;background:#eef2f8;font-size:10px;color:#8a99af}
.st-steps li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:9px;color:#8a99af}
.st-steps li b .ico{width:11px}
.st-steps li.on{background:#e3eaf7;color:#3f5c8c;font-weight:600}
.st-steps li.on b{background:#5d7fb1;color:#fff}
.st-steps li.done{color:#4f8a70}
.st-steps li.done b{background:#dcefe5;color:#4f8a70}

/* 1 · 설명 */
.st-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.st-ask,.st-side,.st-spec,.st-build{padding:18px}
.st-label{display:block;font-size:13px;font-weight:600;color:#33496b;margin-bottom:9px}
#stDesc{width:100%;resize:vertical;min-height:92px;border:1px solid #d6e0ec;border-radius:12px;padding:12px 14px;font-size:11.5px;line-height:1.7;color:#33496b;background:#fff;outline:none}
#stDesc:focus{border-color:#8aa6cf;box-shadow:0 0 0 3px #e3ebf7}
.st-ideas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.st-ideas>span{font-size:9px;color:#9eabbe;margin-right:2px}
.st-idea{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:14px;background:#f1effa;color:#6a5f9c;font-size:9.5px}
.st-idea .ico{width:11px}
.st-idea:hover{background:#e6e1f6}
.st-h{font-size:11px;font-weight:600;color:#465c7d;margin:18px 0 8px}
.st-h small{font-weight:400;color:#9eabbe;margin-left:6px;font-size:9px}
.st-srcs{display:flex;flex-wrap:wrap;gap:6px}
.st-src{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;border:1px solid #dbe3ee;background:#fff;font-size:9.5px;color:#5d7392}
.st-src .ico{width:12px;color:#9fb0c6}
.st-src.on{border-color:#7f9fcd;background:#eef3fb;color:#3f5c8c;font-weight:600}
.st-src.on .ico{color:#5d7fb1}
.st-note{font-size:9px;color:#97a5b9;margin-top:9px;line-height:1.6}
.st-go{display:flex;justify-content:flex-end;margin-top:14px}
.st-go .primary,.st-spec .primary{display:inline-flex;align-items:center;gap:6px}
.st-go .ico,.st-spec .primary .ico{width:14px}
.st-side h4{font-size:11px;color:#465c7d;margin-bottom:11px}
.st-how{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:11px}
.st-how li{counter-increment:st;position:relative;padding-left:30px;font-size:9.5px;color:#7d8ca3;line-height:1.6}
.st-how li:before{content:counter(st);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#eef3fa;color:#5d7fb1;font-size:9px;font-weight:700;display:grid;place-items:center}
.st-how b{display:block;font-size:10.5px;color:#3f5577}
.st-guard{display:flex;gap:9px;margin-top:16px;padding:12px;border-radius:12px;background:#f2f7f4;color:#5f8a76}
.st-guard .ico{width:16px;flex-shrink:0;margin-top:1px}
.st-guard p{font-size:9px;line-height:1.65;color:#6f8a7e}
.st-guard strong{display:block;font-size:10px;color:#4c7a65;margin-bottom:2px}

/* 2 · AI 설계 */
.st-think{padding:34px 20px;text-align:center}
.st-orb{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#a99bd6,#6f8fc8);animation:st-pulse 1.2s ease-in-out infinite}
.st-orb .ico{width:26px;height:26px}
@keyframes st-pulse{50%{transform:scale(1.07);box-shadow:0 0 0 12px #a99bd622}}
.st-think h3{font-size:14px;color:#33496b}
.st-think blockquote{margin:12px auto 16px;max-width:520px;font-size:10.5px;color:#6f819b;line-height:1.7;padding:10px 14px;border-radius:10px;background:#f4f6fb}
.st-think-list{display:inline-flex;flex-direction:column;gap:7px;text-align:left;margin:0;padding:0;list-style:none}
.st-think-list li{font-size:10px;color:#7d8ca3;opacity:0;animation:st-in .4s ease forwards}
.st-think-list li:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#8f84c4;margin-right:8px;vertical-align:1px}
.st-think-list li:nth-child(2){animation-delay:.45s}
.st-think-list li:nth-child(3){animation-delay:.9s}
@keyframes st-in{to{opacity:1}}
.st-spec-head,.st-build-head{display:flex;align-items:center;gap:12px}
.st-spec-head .app-icon,.st-build-head .app-icon{width:46px;height:46px;border-radius:14px;flex-shrink:0}
.st-spec-head .app-icon:after,.st-build-head .app-icon:after{border-radius:11px}
.st-spec-head .app-icon .ico,.st-build-head .app-icon .ico{width:23px;height:23px}
.st-name{flex:1;min-width:0}
.st-name label{display:block;font-size:8.5px;color:#9eabbe;margin-bottom:2px}
#stName{width:100%;max-width:320px;border:1px solid transparent;border-radius:8px;padding:4px 7px;margin-left:-7px;font-size:16px;font-weight:700;color:#2f4466;background:none;outline:none}
#stName:hover,#stName:focus{border-color:#d6e0ec;background:#fff}
.st-spec-head .badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:4px 8px;margin:0}
.st-spec-head .badge .ico{width:11px}
.st-purpose{font-size:11px;color:#5d7392;line-height:1.7;margin:12px 0 14px}
.st-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-cols>div{border:1px solid #e3e9f2;border-radius:12px;padding:12px;background:#fbfcfe}
.st-cols h4{font-size:10px;color:#465c7d;margin-bottom:7px}
.st-cols ul{margin:0;padding-left:15px;display:flex;flex-direction:column;gap:5px}
.st-cols li{font-size:9.5px;color:#4f6584}
.st-cols li small{display:block;font-size:8.5px;color:#9eabbe}
.st-agent-mini{font-size:9.5px;color:#6f819b;line-height:1.6}
.st-agent-mini .ico{width:12px;color:#8f84c4;vertical-align:-2px}
.st-meta{display:flex;align-items:center;gap:6px;font-size:9px;color:#8a99af;margin-top:12px}
.st-meta .ico{width:12px}
.st-spec .modal-actions{margin-top:16px}

/* 3 · 빌드 · 배포 */
.st-build-head>div{flex:1;min-width:0}
.st-build-head strong{display:block;font-size:13px;color:#33496b}
.st-build-head small{font-size:9px;color:#9eabbe}
#stPct{font-size:18px;font-weight:600;color:#5d7fb1;font-family:'DM Sans',sans-serif}
.st-bar{height:6px;border-radius:4px;background:#e8eef6;margin:12px 0 14px;overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8fa9d6,#6f8fc8,#9b8fd0);transition:width .4s ease}
.st-build-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
.st-pipe{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.st-pipe li{display:flex;gap:9px;align-items:flex-start;font-size:10px;color:#a3afc1}
.st-pipe li b{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:1.5px solid #d3dce8;display:grid;place-items:center}
.st-pipe li b .ico{width:11px}
.st-pipe li small{display:block;font-size:8.5px;font-weight:400;color:#93a1b6;margin-top:1px}
.st-pipe li.on{color:#3f5c8c;font-weight:600}
.st-pipe li.on b{border-color:#6f8fc8}
.st-pipe li.done{color:#4f6584}
.st-pipe li.done b{background:#6eaa8e;border-color:#6eaa8e;color:#fff}
.st-spin{width:10px;height:10px;border-radius:50%;border:2px solid #c9d6ea;border-top-color:#5d7fb1;animation:st-rot .8s linear infinite}
@keyframes st-rot{to{transform:rotate(360deg)}}
.st-log{margin:0;padding:12px 14px;border-radius:12px;background:#1f2a3d;color:#b9c8de;font:9px/1.75 'SF Mono',Menlo,Consolas,monospace;height:270px;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* 4 · 배포 완료 */
.st-done{padding:28px 20px;text-align:center}
.st-done-badge{position:relative;width:64px;margin:0 auto 14px}
.st-done-badge .app-icon{width:64px;height:64px;border-radius:19px}
.st-done-badge .app-icon .ico{width:30px;height:30px}
.st-done-badge>i{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:#6eaa8e;color:#fff;display:grid;place-items:center;border:2px solid #fff}
.st-done-badge>i .ico{width:13px}
.st-done h3{font-size:16px;color:#2f4466}
.st-done>p{font-size:10.5px;color:#7d8ca3;margin-top:6px}
.st-done-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px auto 0;max-width:560px}
.st-done-facts div{padding:10px;border-radius:11px;background:#f4f7fb}
.st-done-facts dt{font-size:8.5px;color:#9eabbe}
.st-done-facts dd{margin:3px 0 0;font-size:11px;font-weight:600;color:#3f5577}
.st-done .modal-actions{justify-content:center}
.st-done .modal-actions button{display:inline-flex;align-items:center;gap:6px}
.st-done .modal-actions .ico{width:13px}
.st-empty{text-align:center;padding:34px;color:#9eabbe;font-size:10.5px;line-height:1.8}
.st-empty .ico{width:28px;height:28px;color:#b8c3d3;margin-bottom:6px}
.st-app-cell{display:inline-flex;align-items:center;gap:9px}
.st-app-cell .app-icon{width:28px;height:28px;border-radius:8px;box-shadow:none}
.st-app-cell .app-icon:after{inset:1px;border-radius:7px}
.st-app-cell .app-icon .ico{width:15px;height:15px}

/* 사내 제작 앱 */
.st-made{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;color:#7d8ca3}
.st-work{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);gap:14px;align-items:start}
.st-table tbody tr{cursor:pointer}
.st-table tbody tr:hover{background:#f3f6fb}
.st-table tbody tr.sel{background:#eef3fb;box-shadow:inset 3px 0 #5d7fb1}
.st-table td strong{display:block;font-weight:600;color:#3f5577}
.st-table td small{display:block;font-size:8.5px;color:#9eabbe;margin-top:1px}
.st-table td b{font-weight:600;color:#3f5c8c}
.st-dim{color:#b3bdcb}
.st-detail{padding-bottom:14px}
.st-detail .panel-head .badge{margin:0}
.st-dl{margin:14px 16px}
.st-detail .insight-box{margin:0 14px 12px}
.st-detail .insight-box h4{display:flex;align-items:center;gap:5px;color:#6f68a5;font-size:9.5px;margin-bottom:3px}
.st-detail .insight-box h4 .ico{width:12px}
.st-acts{display:flex;flex-direction:column;gap:7px;padding:0 14px}
.st-acts button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;margin:0}
.st-acts button small{font-size:8px;opacity:.75;margin-top:2px}
.st-log-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #edf1f6;font-size:10px}
.panel-head+.st-log-row{border-top:0}
.st-log-row time{font-size:9px;color:#9eabbe;width:34px;flex-shrink:0}
.st-log-row p{flex:1;min-width:0;color:#4f6584}
.st-log-row .badge{margin:0}
.st-who{display:inline-flex;align-items:center;gap:5px;font-size:9px;color:#6f819b;width:128px;flex-shrink:0}
.st-who .ico{width:12px}
.st-who.ai{color:#7d6fb3}
.st-brief{font-size:10px;color:#5d7392;line-height:1.75}
.st-brief h4{font-size:10.5px;color:#3f5577;margin:12px 0 4px}
.st-brief ul{margin:0;padding-left:16px}

/* 바탕화면 타일 */
.app-tile.st-add .app-icon{background:rgba(255,255,255,.4);border:1.5px dashed #a9b8cc;color:#7088a8;box-shadow:none}
.app-tile.st-add .app-icon:after{display:none}
.app-tile.st-add:hover .app-icon{background:rgba(255,255,255,.7);border-color:#7f9fcd;color:#5d7fb1}
.app-tile.st-tile strong{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.st-new{display:inline-block;font-size:7.5px;font-weight:700;letter-spacing:.4px;color:#fff;background:linear-gradient(90deg,#8f84c4,#6f8fc8);padding:1px 6px;border-radius:6px}

@container appwin (max-width:820px){.st-grid,.st-work,.st-build-grid,.st-cols{grid-template-columns:1fr}.st-done-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.st-log{height:200px}}