:root{--blue:#214cd8;--ink:#202946;--cream:#f8f5e9;--line:#b8c2da}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.7 'Malgun Gothic',sans-serif}a{color:inherit}button,input,textarea,select{font:inherit}button{padding:11px 16px;background:var(--blue);color:white;border:1px solid var(--blue);cursor:pointer}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d17c22;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5vw;border-bottom:1px solid var(--line)}header>a{font-size:26px;font-weight:bold;text-decoration:none;letter-spacing:-1px}header span{display:block;font:9px monospace;letter-spacing:2px}nav{display:flex;gap:20px;font-size:12px}.lead{padding:55px 5vw;display:grid;grid-template-columns:1fr 3fr;gap:20px}.lead-label{font:11px/2 monospace;letter-spacing:1px;color:var(--blue);padding-top:15px}h1{font-size:clamp(36px,5.2vw,72px);line-height:1.25;letter-spacing:-3px;margin:0}h1 span{color:var(--blue)}.lead>p{grid-column:2;margin-top:10px;font-size:14px}#studio{padding:0 5vw 60px}.project-bar{display:flex;align-items:end;justify-content:space-between;gap:25px;border-top:2px solid var(--blue);padding:22px 0}.project-bar label{flex:1;max-width:500px}.project-bar>div{display:flex;gap:10px}.project-bar button{font-size:12px}label{display:block;font-size:12px}input,textarea,select{display:block;width:100%;min-width:0;background:white;padding:11px;color:var(--ink);border:1px solid var(--line);margin-top:7px;border-radius:0}.studio{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--blue);align-items:stretch}aside{padding:25px;background:#e8ebf2;border-right:1px solid var(--blue)}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--blue)}aside h2{font-size:23px;letter-spacing:-1px}#add>label{margin:16px 0}fieldset{border:1px solid var(--line);padding:15px;margin:20px 0;font-size:12px}fieldset label{display:flex;align-items:center;gap:8px;margin:8px 0}fieldset input{width:16px;height:16px;margin:0}#add>button{width:100%}.hint,#status{font-size:11px}#status{color:var(--blue)}.canvas{background-color:#fcfcf8;background-image:linear-gradient(#214cd80a 1px,transparent 1px),linear-gradient(90deg,#214cd80a 1px,transparent 1px);background-size:20px 20px;padding:25px;min-width:0}.canvas-head{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px;gap:15px;border-bottom:1px solid var(--line);padding-bottom:15px}#empty{text-align:center;padding:90px 10px;color:var(--blue)}#empty b{font-size:60px;font-weight:normal}#empty h2{font-size:28px;font-weight:normal}#empty p{font-size:12px}.tree-list{list-style:none;padding:0;margin:20px 0}.tree-list .tree-list{margin:16px 0 16px 15px;padding-left:15px;border-left:1px solid var(--blue)}.page-node{background:var(--cream);border:1px solid var(--blue);padding:15px;margin:15px 0;overflow-wrap:anywhere}.node-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.node-top strong{font-size:16px}.node-top button{font-size:10px;padding:3px 7px;background:transparent;color:var(--blue);flex-shrink:0}.page-node p{font-size:12px;white-space:pre-wrap}.page-node small{font-size:10px;color:var(--blue)}.scope{border:1px solid var(--line);border-top:0;padding:22px;background:#e8ebf2}.scope>p:first-child{font-size:12px;font-weight:bold}.scope span{display:inline-block;font-size:12px;border:1px solid var(--blue);color:var(--blue);padding:5px 10px;margin:4px}#features{font-size:12px}#guide{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;padding:55px 5vw;background:var(--ink);color:var(--cream);align-items:center}figure{margin:0}figure img{display:block;width:100%;height:auto}figcaption{font-size:10px;margin-top:8px}#guide .eyebrow{color:#b9c8ff}#guide h2{font-size:32px;line-height:1.4}#guide p:not(.eyebrow){font-size:13px}footer{padding:25px 5vw;font-size:11px}@media(max-width:800px){.lead{display:block;padding-top:30px}.lead-label{margin-bottom:20px}.lead>p{margin-top:25px}.project-bar{align-items:stretch;flex-direction:column;gap:15px}.project-bar label{max-width:none}.studio{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--blue)}.canvas{padding:20px 12px;min-height:400px}#guide{grid-template-columns:1fr}.tree-list .tree-list{margin-left:7px;padding-left:7px}.page-node{padding:10px}header>a{font-size:22px}nav{gap:12px;font-size:11px}.node-top{gap:5px}.node-top strong{font-size:14px}}

:root{--primary:#214cd8;--secondary:#202946;--accent:#a75113;--background:#f8f5e9;--surface:#fcfcf8;--text:#202946;--muted:#505d78;--border:#b8c2da;--status:#214cd8}.drawing-number{grid-column:1/-1!important;font:11px/1.5 monospace!important;letter-spacing:2px;border-top:1px solid var(--blue);padding-top:10px;color:var(--blue);margin:0!important}.type-bar{display:grid;grid-template-columns:260px 1fr auto;gap:28px;align-items:center;padding:24px;background:var(--blue);color:white}.type-bar p{font-size:14px}.type-bar a{font-size:12px}.type-bar select{border-color:white}.lead{padding-bottom:30px}.hint,#status{font-size:13px}.canvas-head{line-height:1.5}.node-top button{min-height:32px;min-width:40px}.page-node small{font-size:12px}#budget{margin:0 5vw 50px;border-top:2px solid var(--blue);display:grid;grid-template-columns:1fr 1.2fr;gap:25px;padding-top:28px}.budget-heading h2{font-size:36px;line-height:1.3;margin:12px 0}.budget-heading p{max-width:420px}#budget-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}#budget-error{grid-column:1/-1;margin:0;color:#9b3017}#budget-result{grid-column:1/-1;background:var(--blue);color:white;padding:24px}#budget-result dl{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0}#budget-result dd{margin:0;font-variant-numeric:tabular-nums}#budget-result .grand{border-top:1px solid #ffffff70;padding-top:12px;margin-top:8px;font-weight:bold;font-size:24px}.budget-assumption{grid-column:1/-1;font-size:13px;margin:0;color:var(--muted)}@media(max-width:800px){.type-bar{grid-template-columns:1fr;gap:8px;padding:20px}.type-bar p{margin:5px 0}#budget{grid-template-columns:1fr}.drawing-number{margin-bottom:20px!important}}@media(max-width:400px){#budget-form{grid-template-columns:1fr}#budget-result .grand{font-size:19px}.project-bar>div{flex-wrap:wrap}.canvas-head{letter-spacing:0}.type-bar{padding:16px}}