:root{color:#1a2330;-webkit-text-size-adjust:100%;background:radial-gradient(at 10% 0,#d9e6ea 0%,#0000 50%),radial-gradient(at 90% 20%,#e8ddd0 0%,#0000 45%),#f3f0ea;font-family:Segoe UI,Helvetica Neue,sans-serif;line-height:1.4}*{box-sizing:border-box}body{min-height:100dvh;margin:0}#root{min-height:100dvh}.app{max-width:1280px;padding:1.25rem 1.5rem 2rem;padding-left:max(1.5rem, env(safe-area-inset-left));padding-right:max(1.5rem, env(safe-area-inset-right));padding-bottom:max(2rem, env(safe-area-inset-bottom));margin:0 auto}.app-header-row{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;display:flex}.app-header-row h1{letter-spacing:-.02em;margin:0;font-size:1.75rem;font-weight:650}.app-header-row p{color:#5a6a78;margin:.25rem 0 0}.lang-switch{color:#455a64;flex-direction:column;flex-shrink:0;gap:.25rem;font-size:.78rem;display:flex}.lang-switch select{font:inherit;background:#fff;border:1px solid #b0bec5;border-radius:4px;min-height:2.5rem;padding:.35rem .45rem;font-size:1rem}.app-body{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(200px,240px);align-items:start;gap:1rem;display:grid}.dimension-form{min-width:0}.dimension-form fieldset{background:#ffffff8c;border:1px solid #c5d0d6;border-radius:6px;margin:0 0 .75rem;padding:.65rem .75rem .85rem}.dimension-form legend{padding:0 .35rem;font-size:.85rem;font-weight:600}.dimension-form label{color:#455a64;flex-direction:column;gap:.2rem;margin-bottom:.45rem;font-size:.78rem;display:flex}.dimension-form input,.dimension-form select{font:inherit;background:#fff;border:1px solid #b0bec5;border-radius:4px;width:100%;max-width:100%;min-height:2.5rem;padding:.45rem .55rem;font-size:1rem}.opening-row{border-top:1px dashed #cfd8dc;grid-template-columns:1fr 1fr;gap:.35rem;padding:.5rem 0;display:grid}.unit-field{margin-bottom:.55rem}.unit-select{max-width:6rem}.unit-summary{margin:-.35rem 0 .75rem;font-size:.78rem}.field-hint{color:#607d8b;margin:0 0 .5rem;font-size:.75rem;line-height:1.35}.btn-row{flex-wrap:wrap;gap:.35rem;display:flex}.btn{font:inherit;cursor:pointer;background:#eceff1;border:1px solid #78909c;border-radius:4px;min-height:2.5rem;padding:.55rem .75rem;font-size:.95rem}.btn-danger{color:#b71c1c;background:#ffebee;border-color:#c62828;grid-column:1/-1}.canvas-column{flex-direction:column;gap:.75rem;min-width:0;display:flex}.canvas-frame{background:#ffffff80;border:1px solid #c5d0d6;border-radius:6px;min-width:0;padding:.5rem}.canvas-label{color:#607d8b;margin-bottom:.35rem;font-size:.75rem;line-height:1.35}.edit-canvas,.preview-canvas{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;width:100%;max-width:100%;height:auto;display:block}.result-panel{background:#ffffffb3;border:1px solid #c5d0d6;border-radius:6px;min-width:0;padding:.85rem 1rem;position:sticky;top:.75rem}.result-panel h2{margin:0 0 .75rem;font-size:1.1rem}.result-panel dl{gap:.55rem;margin:0;display:grid}.result-panel dl>div{border-bottom:1px solid #e0e6ea;justify-content:space-between;gap:.75rem;padding-bottom:.35rem;display:flex}.result-panel dt{color:#607d8b;font-size:.8rem}.result-panel dd{font-variant-numeric:tabular-nums;text-align:right;word-break:break-word;margin:0;font-weight:560}.result-panel .emphasis{color:#0d47a1;font-size:1.05rem}.muted{color:#78909c;font-size:.9rem}.layout-hint{margin:.5rem 0 0;font-size:.78rem;line-height:1.35}.error{color:#b71c1c}.warnings{color:#ef6c00;margin:.85rem 0 0;padding-left:1.1rem;font-size:.8rem}@media (width<=960px){.app{padding:1rem 1rem 1.5rem;padding-left:max(1rem, env(safe-area-inset-left));padding-right:max(1rem, env(safe-area-inset-right))}.app-body{grid-template-columns:1fr;gap:.85rem}.dimension-form{order:1}.result-panel{order:2;position:static}.canvas-column{order:3}}@media (width<=640px){.app{padding:.75rem .75rem 1.25rem;padding-left:max(.75rem, env(safe-area-inset-left));padding-right:max(.75rem, env(safe-area-inset-right));padding-bottom:max(1.25rem, env(safe-area-inset-bottom))}.app-header-row{flex-direction:column;gap:.65rem;margin-bottom:.85rem}.app-header-row h1{font-size:1.35rem}.app-header-row p{font-size:.85rem}.lang-switch{flex-direction:row;align-items:center;gap:.5rem;width:100%}.lang-switch select{flex:1;max-width:12rem}.opening-row{grid-template-columns:1fr}.btn-row{flex-direction:column}.btn-row .btn,.dimension-form>fieldset>.btn{width:100%}.unit-select{max-width:none}.result-panel{padding:.75rem}.result-panel dl>div{flex-wrap:wrap}.canvas-frame{padding:.4rem}}@media (width<=380px){.app-header-row h1{font-size:1.2rem}.result-panel .emphasis{font-size:1rem}}:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}