/* The editor stays monochrome; client-selected preview colors remain independent. */
body{color:#343637;background:#f3f4f3}body>header{background:#fff;border-bottom:2px solid #575b59;gap:22px}body>header h1{color:#6b706d;font-size:14px}body>header>a{font-weight:800}body>header .primary,.direction-guide #guide-next,.handoff-summary>.primary{background:#393e3b;color:#fff;border:2px solid #393e3b;border-radius:3px 7px 4px 5px;box-shadow:2px 2px 0 #bcc1bd}.direction-guide{background:#fff;border-bottom:1px dashed #969c98;padding:18px 24px}.guide-top>strong{font-size:15px;text-decoration:underline;text-decoration-color:#b6bcb8;text-underline-offset:5px}.guide-modes{border:1.5px solid #696f6a;border-radius:3px 6px 4px 2px;overflow:hidden}.guide-modes button[aria-pressed=true]{background:#e7eae7;text-decoration:underline;text-underline-offset:4px}.guide-steps{border-bottom:1px dashed #a6ada7;gap:8px}.guide-steps button{border:1px solid transparent;border-radius:3px 6px 3px 5px;margin-bottom:8px}.guide-steps button[aria-current=step]{border:1.5px solid #59615b;background:#f5f6f4;box-shadow:2px 2px 0 #c4cbc5}.guide-steps button[data-complete=true]:after{color:#5f7466}.guide-bottom p{color:#5b635d;max-width:760px}.guide-bottom button{border-radius:3px 5px 2px 4px}.guide-highlight{outline:2px dashed #75877a;outline-offset:5px}.library,.inspector{background:#fff;border-color:#9ea8a0}.library h2,.inspector h2{color:#535b55;font-weight:700}.tabs{border-bottom:1px dashed #9da79f}.tabs button[aria-selected=true]{border-color:#4c5950}.command{border-bottom:1px dashed #ccd2cd;color:#434c45;padding:12px 3px}.command:hover{background:#f0f3ef}.command svg{stroke-width:1.6}.field{color:#626b64}input,textarea,select{background:#fff;color:#39443b;border:1.5px solid #9ca79f;border-radius:2px 5px 3px 4px;box-shadow:1px 1px 0 #e4e8e3}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px dashed #607b68;outline-offset:3px}input[type=checkbox]{accent-color:#4b6452;box-shadow:none;border-radius:0}.direction-summary{background:#f9faf8;border-bottom:1px dashed #a9b3ab;padding:15px 20px;color:#5a685d}.direction-summary strong{color:#3f4e43}.canvas-view-tabs{background:#fff;border-bottom:1px dashed #9aa89d;gap:22px}.canvas-view-tabs button[aria-pressed=true]{border-color:#536d5b;text-decoration:underline;text-underline-offset:5px}.toolbar{background:#fafbf9;border-bottom:1px solid #b9c4bb}.tools button{border:1.5px solid #829387;border-radius:3px 6px 2px 5px;background:#fff;box-shadow:1px 2px 0 #d5ddd5}.tools button:hover{background:#edf2ec}.viewport{background:#edf0ec}#board{background-color:#fff;background-image:radial-gradient(#c6cec8 .8px,transparent .8px);border:1px solid #c1cbc3;box-shadow:4px 5px 0 #d1d9d2}.board-footer{background:#fafbf9;border-top:1px dashed #a4b4a8;color:#64756a}.node{border-color:#8c9c90;box-shadow:2px 3px 0 #ced6ce;border-radius:3px 6px 2px 4px}.node[aria-selected=true]{outline:2px dashed #546e5c}.node-head{background:#f1f5ef;border-bottom:1px dashed #a0b2a5}.node[data-kind=note]{background:#fbfbdc}.node[data-kind=note] .node-head{background:#f2f2d0}.resize-grip{background:linear-gradient(135deg,transparent 65%,#879b8d 66%)}#connections path{stroke:#778d7e;stroke-dasharray:5 3}.remix-view{background:#f0f3ee;border-top:1px dashed #a5b4a8}.remix-view-head>div>button,.remix-slots button{border:1.5px solid #819587;border-radius:3px 6px 2px 5px;background:#fff;box-shadow:1px 2px 0 #d0dacf}.remix-slots button[aria-pressed=true],.remix-view-head button[aria-pressed=true]{background:#e3ecdf}.remix-view-head{flex-wrap:wrap}.remix-view-head>div{flex-wrap:wrap}.remix-view-head h2{font-size:13px;line-height:1.6}.palette-swatches button{box-shadow:none}.page-flow{background:#edf1eb}.flow-head button{border:1.5px solid #879c8d;border-radius:3px 5px 2px 4px;box-shadow:1px 2px 0 #d3ddd2}#flow-page{border:1.5px solid #95a799;box-shadow:3px 4px 0 #d1dccf}.handoff-summary{border:1.5px solid #8a9f90;border-radius:2px 5px 3px 4px;box-shadow:3px 4px 0 #d6dfd3;background:#fff}.handoff-summary h2{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b5c4b8}.handoff-summary dt{font-weight:600;color:#607967}#advanced-remix{border-top:1px dashed #a9baad;border-bottom:1px dashed #a9baad}body[data-guide="3"] #advanced-remix>summary{border-left:3px solid #748e7b}.review-stage{border:1.5px solid #8ba191;border-radius:2px 4px 3px 5px;overflow:hidden}.review-pins span{border:1.5px solid #52685b}.sketch-edit,dialog{border:2px solid #7e9385;border-radius:3px 8px 4px 6px;box-shadow:5px 6px 0 #d1dccf}.sketch-edit .primary{background:#425a49;color:white}.save-consent{color:#536b5b}.privacy{color:#708377}@media(max-width:650px){.direction-guide{padding:16px}.guide-steps{gap:5px}.guide-steps button{padding:10px 8px}.guide-bottom>div{width:100%;justify-content:flex-end}.canvas-view-tabs{gap:15px}.direction-summary>div{gap:8px}.remix-view-head>div{gap:5px}.remix-view-head>div>button{padding:8px;white-space:nowrap}.remix-view-head{align-items:flex-start}.guide-highlight{outline-offset:2px}}
@font-face{font-family:StudioSketch;src:url('GamjaFlower-Regular.ttf') format('truetype');font-display:swap}body{font-family:StudioSketch,Pretendard,sans-serif;color:#181818}body>header h1{font-family:StudioSketch,sans-serif;font-size:22px;color:#222}.direction-guide button,.guide-top>strong,.guide-bottom p,.command,.tabs button,.field,.canvas-view-tabs button,.direction-summary,.board-footer,.guide-top .save-consent{font-family:StudioSketch,Pretendard,sans-serif;font-size:19px}.guide-top>strong{font-size:23px}.library h2,.inspector h2,.remix-view-head h2,.flow-head h2{font-family:StudioSketch,Pretendard,sans-serif;font-size:23px;color:#202020}.direction-guide,body>header,.library,.inspector{border-color:#222}.guide-modes{border:2px solid #252525;border-radius:5px 9px 4px 7px}.guide-steps button[aria-current=step]{border:2px solid #202020;background:#f1f1ee;box-shadow:2px 3px 0 #c2c2be}.guide-steps{border-color:#777}.guide-bottom p{color:#333}.command{border-bottom-color:#bbb}.command svg,.tools svg,.remix-view-head svg,.guide-bottom svg{stroke:#222;stroke-width:2.3}.field input,.field textarea,.field select,#starter,#review-image{font-family:StudioSketch,Pretendard,sans-serif;font-size:20px;border:2px solid #303030;border-radius:4px 9px 3px 6px;background:#fff;box-shadow:1px 2px 0 #ccc}.tools button,.remix-view-head>div>button,.remix-slots button,.flow-head button{border:2px solid #282828;border-radius:4px 8px 3px 6px;box-shadow:2px 2px 0 #bcbcbc}.remix-slots button{font-family:StudioSketch,sans-serif;font-size:20px}.tools button[aria-pressed=true],.remix-slots button[aria-pressed=true],.remix-view-head button[aria-pressed=true]{background:#e8e8e4}.direction-summary{background:#fff;color:#333;line-height:1.25}.direction-summary strong{color:#111;min-width:90px}.direction-summary #selected-colors{font-family:Pretendard,sans-serif;font-size:10px}.keyword-group h3{font-family:StudioSketch,sans-serif;font-size:21px;color:#444}.keyword-group label,.priority{font-family:StudioSketch,sans-serif;font-size:20px}.guide-highlight{outline:2px dashed #333}.node[data-kind=block]{border:2px solid #171717;border-radius:4px 9px 3px 6px;box-shadow:3px 4px 0 #bfc2bd}.node[data-kind=block] .node-head{background:#f1f1ed;border-color:#444;color:#222}.wireframe{background:white}.wf-copy strong{font-family:StudioSketch,sans-serif;font-size:18px;line-height:1.05;font-weight:400;color:#111;text-decoration:none}.node .wf-copy p{font-family:StudioSketch,sans-serif;font-size:11px;line-height:1.1;color:#333}.wf-image{border:2px solid #222;background:linear-gradient(35deg,transparent 49%,#555 50%,transparent 51%),linear-gradient(-35deg,transparent 49%,#555 50%,transparent 51%),#fff;border-radius:1px 3px 2px 1px}.wf-image svg{background:white;color:#222}.wf-line{background:#404040;height:3px}.wf-button{font-family:StudioSketch,sans-serif;font-size:11px;border:2px solid #222;box-shadow:2px 2px 0 #aaa;color:#111}.wf-form>span:not(.wf-button){font-family:StudioSketch,sans-serif;font-size:10px;border:2px solid #333;color:#555}.wf-nav{border-color:#222}.wf-nav b,.wf-nav span{background:#333}.flow-section .wf-copy strong{font-size:34px}.flow-section .wf-copy p{font-family:StudioSketch,sans-serif;font-size:21px;line-height:1.3}.flow-section .wf-button,.flow-section .wf-form>span:not(.wf-button){font-size:19px}.flow-section-label{font-family:StudioSketch,sans-serif;font-size:20px}.handoff-summary{border:2px solid #222;box-shadow:3px 4px 0 #bbb}.handoff-summary h2{font-family:StudioSketch,sans-serif;font-size:25px}.handoff-summary dl{font-family:StudioSketch,sans-serif;font-size:20px}.remix-note,.privacy,.custom-colors p,.remix-explanations,#color-status{font-family:Pretendard,sans-serif}.remix-view :is(#remix-site,.remix-site-copy){font-family:Pretendard,Arial,sans-serif}.sketch-edit label,.sketch-edit input,.sketch-edit textarea{font-family:StudioSketch,sans-serif;font-size:23px}.sketch-edit h2{font-size:27px}.sketch-edit{border:2px solid #222}#connections path{stroke:#333;stroke-width:2.5}@media(max-width:650px){.guide-steps button{font-size:18px}.guide-top>strong{font-size:21px}.guide-bottom p{font-size:19px}.canvas-view-tabs button{font-size:18px}.direction-summary{font-size:17px}.remix-view-head h2{font-size:21px}.flow-section .wf-copy strong{font-size:29px}.guide-modes button{font-size:18px}}
.direction-summary,.toolbar,.board-footer,.remix-view,.page-flow{background:#f7f7f5;color:#222}.direction-summary strong,.board-footer,.save-consent,.privacy,.field,.handoff-summary dt{color:#444}.canvas-view-tabs button[aria-pressed=true]{border-color:#222}.guide-highlight{outline-color:#222}body[data-guide="3"] #advanced-remix>summary{border-left-color:#222}.viewport{background:#e9e9e6}#board{background-color:#fff;background-image:radial-gradient(#b8b8b4 .8px,transparent .8px);border:2px solid #777;box-shadow:4px 5px 0 #c8c8c3}.node[aria-selected=true]{outline:2px dashed #111}.node-head{background:#eee;border-color:#666;color:#222}.tools button:hover,.command:hover{background:#eee}.flow-head button[aria-pressed=true]{background:#e4e4e0}#flow-page{border:2px solid #222;box-shadow:3px 4px 0 #bbb}.flow-section{border-bottom-color:#555}.handoff-summary{box-shadow:3px 4px 0 #bbb}.handoff-summary dt{color:#444}.guide-steps button[data-complete=true]:after{color:#333}.guide-modes button[aria-pressed=true]{background:#e5e5e2}.remix-view-head>div>button,.remix-slots button{border-color:#222;box-shadow:2px 2px 0 #bbb}.reference-choice{font-family:StudioSketch,sans-serif;font-size:20px}.node[data-kind=image] .node-body,.node[data-kind=reference] .node-body{position:relative}.node[data-kind=image] .node-body img,.node[data-kind=reference] .node-body img{visibility:hidden;border:2px solid #222}.node[data-kind=image] .node-body:before,.node[data-kind=reference] .node-body:before{content:'';position:absolute;left:13px;right:13px;top:13px;height:95px;border:2px solid #222;background:linear-gradient(25deg,transparent 49%,#555 50%,transparent 51%),linear-gradient(-25deg,transparent 49%,#555 50%,transparent 51%),white;pointer-events:none}.node-body h3{font-family:StudioSketch,sans-serif;font-size:21px}.node-body p{font-family:StudioSketch,sans-serif;font-size:15px}#return-to-sketch{font-family:StudioSketch,sans-serif;font-size:20px;border:2px solid #222;border-radius:3px 7px 2px 4px;background:white;color:#222}.guide-steps button,.command,.tools button{transition:background-color .12s}.wf-copy strong:hover,.wf-copy p:hover{background:#eee;outline-color:#333}@media(prefers-reduced-motion:reduce){.guide-steps button,.command,.tools button{transition:none}}
.node .wf-copy p{max-height:20px;margin:3px 0}.node .wf-button{font-size:9px;padding:2px 5px;margin-top:2px}.node .wf-line{margin:3px 0}.node .wf-copy strong{font-size:16px}
.board-opinions{position:absolute;right:8px;top:7px;font-family:StudioSketch,sans-serif;font-size:13px;border:1px solid #333;background:#fff;padding:0 5px;border-radius:3px;pointer-events:none}#color-contrast{font-family:Pretendard,sans-serif;font-size:11px;line-height:1.7}#color-contrast[data-warning=true]{border-left:3px solid #bb443b;padding-left:8px;color:#92342b}.flow-head>div{flex-wrap:wrap}.flow-head button svg{width:17px;height:17px}
.flow-section .wireframe{height:auto!important;min-height:300px}.flow-section .wf-content{height:auto;min-height:240px}.flow-section .wf-copy{overflow:visible}.flow-section .wf-copy p{max-height:none;overflow:visible}.flow-section .wf-grid .wf-copy{max-height:none;flex-shrink:0}.flow-section .wf-items{min-height:170px}.flow-section .wf-items .wf-image{height:140px}.flow-section .wf-content>.wf-image{min-height:210px}.flow-section .wf-form{overflow:visible}.flow-section .wf-form>span{flex-shrink:0}.flow-section .wf-contact{min-height:250px}.flow-section .wireframe[data-layout=stacked] .wf-content{min-height:360px}.flow-section .wireframe[data-layout=background] .wf-content{min-height:230px}.flow-section .wf-metrics{min-height:140px}@media(max-width:650px){.flow-section .wf-content{gap:20px}.flow-section .wf-content>.wf-image{min-height:180px}}