:root{--bg-main: #f2eee8;--bg-sub: #e8e2d8;--ink: #0b0b0b;--ink-muted: rgba(11, 11, 11, .64);--hairline: rgba(8, 8, 8, .2);--hairline-strong: rgba(8, 8, 8, .32);--surface: rgba(255, 255, 255, .62);--danger: #b03131;font-family:Noto Sans JP,Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;background:linear-gradient(140deg,var(--bg-main),var(--bg-sub));min-width:320px}#root{min-height:100vh}.app-shell{padding:28px clamp(16px,2vw,36px) 32px}.app-header{border:1px solid var(--hairline);background:var(--surface);padding:18px 20px}.app-header h1{margin:0;font-family:Avenir Next,Futura,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:clamp(30px,3vw,52px);letter-spacing:-.03em;line-height:.95}.app-header p{margin:10px 0 0;color:var(--ink-muted)}.toolbar-grid{margin-top:16px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.toolbar-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}.toolbar-grid button{align-self:end;height:40px}button,input,select,textarea{border:1px solid var(--hairline-strong);background:#fff;color:var(--ink);font:inherit}button{cursor:pointer;font-weight:600;letter-spacing:.01em}input,select{height:40px;padding:0 10px}textarea{width:100%;min-height:100px;padding:10px;resize:vertical}.share-info{margin-top:14px;font-size:13px}.share-url{margin-top:8px;width:100%}.app-main{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:20px}.panel{min-width:0}.panel-form{display:grid;gap:14px}.section-card{border:1px solid var(--hairline);background:#ffffffab;padding:14px}.section-card h2{margin:0;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--hairline);padding-bottom:8px}.section-body{display:grid;gap:10px;margin-top:10px}.section-body label{display:grid;gap:6px;font-size:13px}.hint-text{margin:0;padding:8px 10px;font-size:12px;color:var(--ink-muted);border:1px solid var(--hairline);background:#ffffff9e}.guide-block{border:1px solid var(--hairline);background:#ffffff9e;padding:10px 12px}.guide-block h3{margin:0;font-size:13px;letter-spacing:.02em}.guide-block p{margin:6px 0 8px;color:var(--ink-muted);font-size:12px}.guide-block ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:12px;line-height:1.5}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.panel-preview{position:sticky;top:20px;align-self:start;border:1px solid var(--hairline);background:#ffffffbf;padding:16px}.panel-preview h2{margin:0;font-family:Avenir Next,Futura,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:32px;letter-spacing:-.02em}.panel-preview p{margin-top:8px;color:var(--ink-muted);font-size:13px}.panel-preview pre{margin:0;padding:14px;border:1px solid var(--hairline);background:#fbfaf8;white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.5;max-height:70vh;overflow:auto}.warning-list{margin:12px 0;padding:10px 14px;list-style:square;border:1px solid rgba(176,49,49,.35);background:#b0313114;color:var(--danger);font-size:13px}@media(max-width:1200px){.toolbar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.app-main{grid-template-columns:1fr}.panel-preview{position:static}}@media(max-width:700px){.toolbar-grid,.grid-2,.grid-3{grid-template-columns:1fr}}
