.studio-panel { margin-block:20px; padding:20px; border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--white); min-width:0; }
.studio-panel h2 { font-size:20px; margin-block:0 12px; }
.studio-panel p { overflow-wrap:anywhere; }
.studio-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-block:14px; }
.studio-actions label { display:flex; gap:8px; align-items:center; }
.studio-pages { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:14px; }
.studio-page { padding:10px; border:1px solid var(--hairline); border-radius:var(--radius-md); min-width:0; }
.studio-thumb { width:100%; aspect-ratio:3/4; background:var(--paper); display:grid; place-items:center; overflow:hidden; }
.studio-thumb canvas { max-width:100%; max-height:100%; object-fit:contain; }
.studio-thumb.is-blank { background:var(--white); border:1px solid var(--hairline); }
.studio-page strong { display:block; overflow-wrap:anywhere; margin-block:8px; font-size:13px; }
.studio-page button { min-width:36px; min-height:36px; }
.studio-steps { padding-inline-start:24px; }
.studio-step { padding-block:10px; border-block-end:1px solid var(--hairline); }
.studio-step select { max-width:100%; }
.studio-step label { display:grid; gap:5px; margin-block:8px; }
.studio-form-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,240px); gap:18px; align-items:start; }
.studio-sheet { position:relative; min-height:240px; background:var(--paper); overflow:hidden; direction:ltr; touch-action:pan-y; }
.studio-sheet canvas { display:block; width:100%; height:auto; }
.studio-sheet.is-ready { min-height:0; }
.studio-field-overlay { position:absolute; inset:0; }
.studio-field-overlay button { position:absolute; border:1px solid var(--red); background:var(--white); opacity:.85; padding:0 3px; font-size:11px; overflow:hidden; white-space:nowrap; color:var(--ink); cursor:move; touch-action:none; }
.studio-field-overlay .button { min-height:0; min-width:0; display:block; line-height:1; border-radius:0; }
.studio-field-overlay button[aria-pressed="true"] { outline:2px solid var(--red); outline-offset:2px; }
.studio-field-settings { min-width:0; }
.studio-field-settings fieldset { border:1px solid var(--hairline); padding:12px; }
.studio-field-settings label,.studio-name { display:grid; gap:5px; margin-block:10px; }
.studio-name { max-width:480px; }
.studio-field-settings input,.studio-field-settings select,.studio-field-settings textarea,.studio-name input { width:100%; min-width:0; }
.studio-field-settings textarea { resize:none; }
.studio-geometry { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.studio-field-list { padding-inline-start:20px; max-height:220px; overflow:auto; }
.studio-field-list button { overflow-wrap:anywhere; text-align:start; max-width:100%; }
.studio-preset { padding-block:16px; border-block-end:1px solid var(--hairline); }
.studio-preset h2 { overflow-wrap:anywhere; }
.studio-dialog { border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:24px; background:var(--white); color:var(--ink); max-width:calc(100% - 32px); }
.studio-dialog::backdrop { background:color-mix(in srgb,var(--ink) 30%,transparent); }
.studio-panel button:focus-visible,.studio-dialog button:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.studio-panel button:disabled { opacity:.5; cursor:not-allowed; }
.studio-panel button:hover:not(:disabled) { border-color:var(--red); }
.studio-panel:lang(ja) { font-family:"Yu Gothic",Meiryo,sans-serif; }
.studio-panel:lang(ja) h2 { letter-spacing:normal; text-transform:none; }
.studio-panel:lang(ja) :is(input,select,textarea,button) { font-family:inherit; }
@media (max-width:760px) { .studio-form-layout { grid-template-columns:1fr; } .studio-panel { padding:12px; } .studio-pages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }